[React] 유튜브 iframe Player API 구간 반복 재생

https://www.npmjs.com/package/react-youtube

react-youtube

npm install react-youtube

구간 반복 재생을 도와줄 라이브러리를 설치합니다.

 

 

import React from 'react';
import YouTube, { YouTubeProps } from 'react-youtube';

const page = () => {
  const onPlayerReady: YouTubeProps['onReady'] = event => {
    event.target.playVideo();
  };

  const onPlayerStateChange: YouTubeProps['onStateChange'] = event => {
  // event.data 값 => 1 재생 중, 2 일시중지, 0 종료 https://developers.google.com/youtube/iframe_api_reference?hl=ko#onPlaybackRateChange
    if (!event.data) { 
      const player = event.target;
      player.seekTo(5);
      player.playVideo();
    }
  };

  const opts: YouTubeProps['opts'] = {
    height: '390',
    width: '640',
    playerVars: {
      start: 5,
      end: 10,
      controls: 0,
      rel: 0, 
    },
  };

  return (
    <YouTube
      videoId="6Af6b_wyiwI"
      opts={opts}
      onReady={onPlayerReady}
      onStateChange={onPlayerStateChange}
    />
  );
};

export default page;

 

OnStateChange 이벤트를 통해 Youtube player의 상태 변화를 감지합니다.

event.data 값이 0일 경우 영상이 종료된 것이기 때문에 seekTo로 5초 지점으로 돌아간 후

player.playVideo를 통해 다시 영상을 재생합니다.

 

https://developers.google.com/youtube/player_parameters

YouTube 내장 플레이어 및 플레이어 매개변수  |  YouTube IFrame Player API  |  Google Developers

Youtube 옵션으로 설정할 수 있는 파라미터는 위 링크에서 확인 가능합니다.

저는 start: 시작시간, end: 끝 시간, controls: 컨트롤 창 여부, rel: 해당 채널의 추천 영상만 표시

4 개의 파라미터만 사용하였습니다.

 

 

수정

event.target.playVideo();

Video를 재생시키는 함수를 호출했는데도 불구하고 왜 영상이 자동으로 재생되지 않을까 의아해 했었는데

chrome의 정책 때문에 그런 것 같습니다.

chrome은 원래 autoplay를 막아놓지만 사용자가 페이지와 interection 하는 경우에는 autoplay를 허용한다고 합니다.

저는 위 사진과 같이 썸네일을 클릭 했을 때 유튜브 모달이 뜨도록 만들었었는데, 클릭이라는 이벤트가 추가되니 영상이 자동재생 되었습니다.

 

출처

관련 영상 숨기는 방법: https://codesandbox.io/s/react-youtube-demo-f6l29?file=/src/App.js:1047-1049
자동재생 방법: https://codepen.io/hwanny7/pen/RwYBjWW?editors=1000

재생시간 바꾸기: https://github.com/tjallingt/react-youtube/issues/187