[React] youtube 플레이어

YouTube는 IFrame을 이용한 API를 제공합니다.
React는 해당 API를 쉽게 사용하도록 컴포넌트 형태로 제공합니다.

---

사용법

1. 설치

$ npm install react-youtube

2. 사용

• YouTube 객체는 여러 속성으로 플레이어를 조작할 수 있습니다.
  간단한 예시를 보여드리겠습니다.

// JSX
import { useRef } from "react";
import YouTube from 'react-youtube';

function YTPlayer(props) {

    const videos = ["","",""];
  	const [currentTrack, setCurrentTrack] = useState(0);
  	const [videoId, setVideoId] = useState(videos[currentTrack]);
  	const [readyDelay, setReadyDelay] = useState(true);
	const playerRef = useRef(null);

    const onReady = (event) => {
        playerRef.current = event.target;
      	setReadyDelay(true);
    };

    const nextVideo = () => {
        if (!readyDelay) {
            return;
        }
        setReadyDelay(false);
        if (currentTrack === videoId.length-1){
            setCurrentTrack(0);
        } else {
            setCurrentTrack(currentTrack+1);
        }
    }

    const playVideo = () =>{
        if (playerRef.current) {
            playerRef.current.playVideo();
        }
    }

    const pauseVideo = () => {
        if (playerRef.current) {
            playerRef.current.pauseVideo();
        }
    }

    const selectVideo = (num) => {
        setCurrentTrack(num);
    }

	return (
        <>
            <YouTube
                videoId={videoId}
                onReady={()=>onReady}
                onStateChange={(e)=>{
                    if(e.data === window.YT.PlayerState.ENDED){
                        nextVideo();
                    }
                }}
                opts={{
                    playerVars: {
                        autoplay: 1
                    }
                }}
            />
        	<button onClick={()=>playVideo()}>재생</button>
            ~~~
        </>
    );
}

• YouTube 객체를 import하여 사용합니다.

• videoId는 현재 재생할 동영상의 고유 번호입니다.
  위 코드는 videoId, currentTrack, videos 변수를 이용해 원하는 재생 목록을 선택해줍니다.
  ※ 동영상의 주소는 https://www.youtube.com/watch?v=_WQR6-sqqjM와
  같은 형식으로 작성되어 있는데 _WQR6-sqqjM가 videoId입니다.

• onReady는 영상의 준비가 완료되었을 때 실행할 함수를 넣어줍니다.
  위 코드에서는 playerRef의 할당과
  readyDelay값을 사용해 영상이 로딩되기 전에 nextVideo()가 무분별하게 실행되어 발생하는 오류를 방지했습니다.

• onStateChange는 영상의 재생상태가 변경될 때 실행될 부분으로 위 코드는 영상이 정지되면 다음 영상이 재생되게 설정되었습니다.
  >> 이벤트 자세히보기

• opts는 플레이어의 여러 속성을 이용할 수 있습니다.
  >> 지원되는 매개변수 자세히보기

• playVideo(), pauseVideo(), selectVideo()같은 함수는 외부버튼을 이용해 플레이어를 조작하기 위해 사용되었습니다.