Petflix - youtube API(javascript)

🌼 youtube API

YouTube의 iframe API를 활용하여 여러 동영상을 특정 조건에 맞게 동적으로 재생하고 조작할 수 있도록 구현한 함수

전체 코드

export function YoutubeApi(video){

    const tag = document.createElement('script');
  
    tag.src ="https://www.youtube.com/iframe_api";
    
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    var player;
    
          window.onYouTubeIframeAPIReady=function() {
            video.forEach((video,index) =>{
              const playerId = `player-${index}`
              player = new YT.Player(playerId, {
                height: '180',  
                width: '320',  
                videoId: video.videoId || 'M7lc1UVf-VE',
                playerVars: {
                  'rel': 0,   
                  'controls': 0,    
                  'autoplay' : 0,   
                  'mute' : 1,   
                  'loop' : 1,    
                  'playsinline' : 1,    
                  'playlist' : video.videoId || 'M7lc1UVf-VE'
                },
                events: {
                  'onReady': onPlayerReady, 
                  'onStateChange': onPlayerStateChange 
                }
              });
            })
          
          }
    
          function onPlayerReady(event) {
            const player = event.target;   // 현재 YT.Player 인스턴스
            const iframe = player.getIframe();  // 해당 인스턴스의 iframe 요소 가져오기

            
            iframe.addEventListener('mouseover', function() {
                player.playVideo();
            });
        
            iframe.addEventListener('mouseout', function() {
                player.pauseVideo();  
            });
          }
    
          var done = false;
          function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
              setTimeout(stopVideo, 6000);
              done = true;
            }
          }
          function stopVideo() {
            player.stopVideo();
          }
}

 

< iframe API 로드 과정 >

tag.src = "https://www.youtube.com/iframe_api"; 코드를 통해 YouTube의 iframe API를 로드하는 <script> 태그를 동적으로 추가한다. => 이 태그가 추가되면 브라우저는 해당 URL의 자바스크립트 파일을 다운로드하고 실행

 

다운로드와 실행이 모두 끝난 시점(로드가 완료된 상태)가 되면 API가 준비되었다는 뜻으로, YouTube iframe API가 제공하는 기능(YT.Player, window.onYouTubeIframeAPIReady)을 사용할 수 있다. 

 

< window.onYouTubeIframeAPIReady 함수 정의 >

window.onYouTubeIframeAPIReady = function() { ... }

 

이 함수는 iframe API 로드가 완료되면 호출된다. 

내부적으로 YT.Player 인스턴스를 생성하여 비디오를 재생할 수 있는 환경을 설정한다.

 

YT.Player는 ouTube iframe API에서 제공하는 클래스이고

YT.Player 인스턴스는 YouTube 동영상 플레이어 객체로 동영상 플레이어를 생성하고, 동영상 재생, 일시정지, 음소거 등의 다양한 동작을 제어할 수 있다.

 

< YT.Player 인스턴스 생성 >

var player;
    
          window.onYouTubeIframeAPIReady=function() {
            video.forEach((video,index) =>{
              const playerId = `player-${index}`
              player = new YT.Player(playerId, {
                height: '180',  
                width: '320',  
                videoId: video.videoId || 'M7lc1UVf-VE',
                playerVars: {
                  'rel': 0,   //관련 동영상 표시 여부 (0: 비활성화)
                  'controls': 0,   //플레이어 제어바 표시 여부 (0: 숨김)
                  'autoplay' : 0,   //자동 재생 여부 (0: 비활성화)
                  'mute' : 1,   //음소거 여부 (1: 음소거)
                  'loop' : 1,    //반복 재생 여부 (1: 활성화)
                  'playsinline' : 1,    
                  'playlist' : video.videoId || 'M7lc1UVf-VE' 반복 재생 시 사용할 비디오 ID 목록
                },
                events: {
                  'onReady': onPlayerReady, //플레이어 준비 완료 시 호출되는 함수
                  'onStateChange': onPlayerStateChange //플레이어 상태 변경 시 호출되는 함수
                }
              });
            })
          
          }

 

첫 번째 매개변수

DOM 요소의 ID 또는 직접 요소 자체. ('playerId'는 HTML에 있는 요소의 ID)

해당 요소를 YouTube 동영상 iframe으로 대체한다. 

 

두 번째 매개변수

플레이어 옵션 객체

videoId: 재생할 유튜브 동영상 ID.

playerVars: 동영상의 동작 방식(자동 재생, 반복 재생 등)을 제어하는 변수.

events: 플레이어의 다양한 이벤트(준비 완료, 상태 변경 등)에 대한 콜백 함수를 정의

 

< onPlayerStateChange 함수 >

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000);
    done = true;
  }
}
// 동영상이 재생 중 상태(YT.PlayerState.PLAYING), done이 false일 때만 실행
// done을 true로 바꿔서, 이후에 다시 onPlayerStateChange가 호출되어도 6초 타이머가 중복 실행되지 않도록 한다.

 

이 함수는 YouTube 플레이어의 상태가 변경될 때 호출된다.

event.data는 현재 YouTube 플레이어의 상태를 나타낸다.

 

=> 동영상이 재생(PLAYING) 상태로 변경되면 onPlayerStateChange 함수가 호출된다. 

동영상이 재생 중인지 (event.data == YT.PlayerState.PLAYING), 이전에 done이 false인지 확인한다.

마지막으로 6초 후에 done을 true로 바꿔 다시 실행되지 않게 방지한다. 

 

참고 https://mslilsunshine.tistory.com/98#--%--youtube%--API%EB%A-%BC%--%EC%-D%B-%EC%-A%A-%ED%--%B-%--%ED%--%-C%EB%A-%--%EC%-D%B-%EC%--%B-%EB%A-%BC%--%EC%--%BD%EC%-E%--%ED%--%-C%EB%-B%A--