[React][DJplaylist] react-youtube

react-youtube

YouTubeの動画をアップロードするには、iframeを利用する必要があります.
この場合、ライブラリがいくつか存在し、より役に立ちます.
多くのライブラリでは、名前に示すように、youtube専用の@u-wave/react-youtubeを使用することにしましたが、autoplay機能は正常に動作しません.
Stackoverflowやgithubホットスポットを参照しても解決策が見つからないため、プレーヤー関数にはplayVideoがあるため、onReady 이벤트が発生した場合、プレーヤーを直接再生する方法に変更します.(後でさらに検索して変更します.)

const [player, setPlayer] = useState();

useEffect(() => {
  if (player && !paused) {
    console.log('player');
    player.playVideo();
  }
}, [player, paused]);

const handleReady = target => {
  console.log('ready');
  setPlayer(target);
};

<YouTube
  video={videoId}
  autoplay
  paused={paused}
  volume={volume}
  muted={muted}
  onReady={e => handleReady(e.target)}
/>

複数のスライダ

既存のスライダとは異なり、widthを決定する際に%値を使用してpxに変更します.
px単位で変更するので、画面の大きさを変更したときにスライダの位置を固定できます.
(画像はunsplashを使用しています.)

Reference

https://github.com/tjallingt/react-youtube

https://developers.google.com/youtube/iframe_api_reference#Events