Youtube Player API로 유튜브 재생/정지 제어하기 (javascript 사용가능)

스크롤하다가 유튜브가 뷰포트에 들어오면 재생하는 함수 만들기

 

아래 유튜브 API에서 제공하는 메소드를 이용해서 재생을 제어한다. 

유튜브 플레이어 API 공식문서

youtubePlayer01.playVideo() //재생
youtubePlayer01.pauseVideo() //정지
youtubePlayer01.seekTo(8); // 8초부터 재생

<iframe id="youtubePlayer01" class="youtube" src="경로"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

초기 세팅

        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var youtubePlayer01;

        function onYouTubeIframeAPIReady() { // 유튜브 로딩되면 바로 실행되는 API 관련 함수
          youtubePlayer01 = new YT.Player('youtubePlayer01', { // iframe ID 값
            playerVars:{
              rel:0
            },
            events: {
              'onReady': pauseVideo, // 로딩 없애기 위해 초기 로드 후 멈추기
            }
          }); 
        }

 

- onYouTubeIframeAPIReady함수는 다른 곳에서 불러와 사용할 수는 없다. 

- 여러개의 player를 사용한다면 그만큼 선언을 해줘야한다.

- new YT.Player다음에 나온 youtubePlayer01은 iframe 태그의 ID값이다.

- 뷰포트에 접근했을때 로딩되면서 재생되기 때문에 초기에 재생 후 정지를 시켜준다. (autoplay=1&mute=1를 iframe 파라미터에 추가한 상태)

 

스크롤하면서 뷰포트 접근시 재생

function pauseVideo() { // 로딩 없애기 위해 초기 로드 후 멈추기
    /* 자동재생 시점 설정 :: S */
    // youtubePlayer01.seekTo(8); // 8초부터 재생
    /* 자동재생 시점 설정 :: E */
    youtubePlayer01.pauseVideo();//일시정지
    // youtubePlayer02.pauseVideo();//일시정지
    // youtubePlayer03.pauseVideo();//일시정지

    let windowScroll = $(window).scrollTop();
    let windowHeight = $(window).outerHeight();

    // 한 개일 때
    if($("#youtubePlayer01").offset().top < windowScroll + windowHeight){
      playVideo();
    }

    // 한 개 이상
    // for(i=1; i < $('.youtube').length + 1; i++){
    //   if($("#youtubePlayer0" + i).offset().top < windowScroll + windowHeight){
    //     playVideo("0" + i);
    //   }
    // }
  }

  //한 개일 때
  function playVideo() {
    if(youtubePlayer01){
      youtubePlayer01.playVideo();//재생
    }
  }

// 한 개 이상
// function playVideo(num) {
//   if(window["youtubePlayer" + num]){
//     window["youtubePlayer" + num].playVideo();//재생
//   }
// }

// document 로드 후 이벤트
$(document).on('ready',function(){
  $(window).on("scroll", function(){
    let windowScroll = $(window).scrollTop();
    let windowHeight = $(window).outerHeight();

    // 한 개일 때
    if($("#youtubePlayer01").offset().top < windowScroll + windowHeight){
      playVideo();
    }

    // 한 개 이상
    // for(i=1; i < $('.youtube').length + 1; i++){
    //   if($("#youtubePlayer0" + i).offset().top < windowScroll + windowHeight){
    //     playVideo("0" + i);
    //   }
    // }
  })
});

 

- 여러개의 youtubePlayer를 사용한다면 id="youtubePlayer01", id="youtubePlayer02" · · · 처럼 선언해준 후 반복문을 사용한다.

- youtubePlayer01.seekTo(8); 주석을 풀면 재생 시간을 제어할 수 있다. 

youtubePlayer01.seekTo(8); // 8초부터 재생
youtubePlayer01.seekTo(68); // 1분 8초부터 재생