IFrame Player API을 이용한 유튜브 동영상 제어하기

작업을 하다보면 iframe으로 삽입한 유튜브 동영상을 제어해야하는 경우가 있어 구글링을 통해서 얻은 정보를 정리해봅니다.

events 속성에 onReady, onStateChange와 같이 콜백함수를 지정할수 있다.
플레이어 매개변수 playerVars를 통해서 자동재생, 재생바 숨김, 관련동영상 표시 여부등을 설정할 수 있다.
YT.Player의 매서드를 이용해서 플레이어를 제어할 수 있다.

그밖에 다양한 기능을 제공하고 있습니다. 자세한 내용은 공식문서를 참고하세요.

https://developers.google.com/youtube/iframe_api_reference?hl=ko

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
 
    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
 
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars : {
            'controls': 0, //플레이어 컨드롤러 표시여부
            'rel': 0, //연관동영상 표시여부
            'playsinline': 1, //ios환경에서 전체화면으로 재생하지 않게하는 옵션
            'autoplay': 1, //자동재생 여부(모바일에서 작동하지 않습니다. mute설정을 하면 작동합니다.)
            'loop': 1,
            'playlist': 'M7lc1UVf-VE'
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
 
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
 
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

답글 남기기 응답 취소