[YouTube IFrame API] React에서 유튜브 동영상 출력 방법

 

IFrame Player API

 

 

유튜브 동영상을 재생하기 위해서는 유튜브에서 제공하는 Iframe을 사용해야 한다.
IFrame API를 사용하면 동영상 플레이어를 직접 제어할 수 있다.

 

 

* 공식 문서

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google Developers

 

 

YoTube 동영상 데이터 불러오기

가져온 데이터의 id값으로 동영상을 재생

2023.01.11 - [React] - [Youtube API] 유튜브 API 동영상 데이터 가져오는 방법

 

 

 

---

1. 라이브러리 설치

공식 문서를 보고 사용해도 되지만 이미 사용하기 쉽게 npm 라이브러리 올라와있다.

npm i react-youtube

 

 

 

---

2. 사용 방법

2-1) JavaScript

import React from 'react';
import YouTube from 'react-youtube';

class Example extends React.Component {
  render() {
    const opts = {
      height: '390',
      width: '640',
      playerVars: {
        autoplay: 1,
      },
    };

    return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this._onReady} />;
  }

  _onReady(event) {
    event.target.pauseVideo();
  }
}

• playerVars 객체 안에는 동영상 옵션을 설정한다. 
  - 해당 매개변수는 https://developers.google.com/youtube/player_parameters 사이트에서 참고 가능하다.
• videoId : 동영상 ID 값을 넘겨주면 해당 동영상을 불러온다.
• event.target을 지정하면 YouTube IFrame API 공식 문서에 있는 함수를 사용하여 동영상 재생을 제어할 수 있다.
  
  

playVideo()	동영상을 재생합니다.
pauseVideo()	재생 중인 동영상을 일시중지합니다.
stopVideo()	동영상의 로드를 중지하고 취소합니다.
nextVideo()	재생목록에서 다음 동영상을 로드하고 재생합니다.
previousVideo()	재생목록에서 이전 동영상을 로드하고 재생합니다.
playVideoAt(index:Number)	재생목록에서 지정한 동영상을 로드하고 재생합니다.
mute()	동영상 음소거합니다.
unMute()	동영상 음소거를 해제합니다.
isMuted()	동영상 음소거 상태인 경우 true를 반환하고 음소거 상태가 아닌 경우 false를 반환합니다.
setVolume(volume:Number)	볼륨을 설정합니다. 0에서 100 사이의 정수를 허용합니다.
getVolume()	동영상의 현재 볼륨을 0에서 100 사이의 정수로 반환합니다
getPlayerState()	동영상의 상태를 반환합니다 -1 –시작되지 않음 0 – 종료 1 – 재생 중 2 – 일시중지 3 – 버퍼링 5 – 동영상 신호
getCurrentTime()	동영상 재생이 시작된 이후의 경과 시간을 초 단위로 반환

 

 

 

2-2) TypeScript

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

function Example() {
  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
    event.target.pauseVideo();
  }

  const opts: YouTubeProps['opts'] = {
    height: '390',
    width: '640',
    playerVars: {
      autoplay: 1,
    },
  };

  return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={onPlayerReady} />;
}

 

 

3. 제어 이벤트 메서드

<YouTube
  videoId={string}                  // defaults -> ''
  id={string}                       // defaults -> ''
  className={string}                // defaults -> ''
  iframeClassName={string}          // defaults -> ''
  style={object}                    // defaults -> {}
  title={string}                    // defaults -> ''
  loading={string}                  // defaults -> undefined
  opts={obj}                        // defaults -> {}
  onReady={func}                    // defaults -> noop
  onPlay={func}                     // defaults -> noop
  onPause={func}                    // defaults -> noop
  onEnd={func}                      // defaults -> noop
  onError={func}                    // defaults -> noop
  onStateChange={func}              // defaults -> noop
  onPlaybackRateChange={func}       // defaults -> noop
  onPlaybackQualityChange={func}    // defaults -> noop
/>