일반적인 루프 기술의 단점

Youtube를 웹 사이트에 삽입 할 때 하나의 동영상을 반복하는 방법으로,
URL에 loop=1&playlist=xxx를 넣는 방법이 잘 소개되어 있습니다.

<iframe id="movie-iframe" width="1280" height="320" 
src="https://www.youtube.com/embed/M7lc1UVf-VE?loop=1&amp;autoplay=1&amp;playlist=M7lc1UVf-VE" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

여기에는 세 가지 단점이 있습니다.

루프 할 때 순식간에 읽어 들여 애니메이션이 들어간다

반복 후 Youtube 아이콘이 일정 시간 표시됩니다.

같은 동영상을 여러 번 다운로드하기 때문에 통신량이 많습니다

동영상 재생이 끝나면 동영상 시작시 탐색

이러한 문제를 해결하기 위해 Youtube IFrame Player API를 사용합니다.
동영상의 재생이 끝나면 동영상의 처음에 시크한다는 수법을 취했는데, 통신량이 개선되었을 뿐만 아니라, 루프시의 로드도 없어져, 마우스 호버 하지 않는 한 Youtube 아이콘도 표시되지 않게 되었습니다.

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 player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('movie-player', {
    height: '720',
    width: '1280',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    },
    playerVars: {
      controls: 0, //再生ボタンとか出さない
      showinfo: 0, //動画名とか出さない
      disablekb: 1, //ショートカットキー無効
      rel: 0 //関連動画出さない
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
  event.target.mute();
}
//ココまではほぼサンプルと同じ

var loopCount = 0;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {//動画が停止したら
    if(loopCount < 20) {//ループ上限
      event.target.seekTo(0,true);//動画の初めにシーク
      event.target.playVideo();//動画を再生
      loopCount++;
    }
  }
}

이어서 루프 상한을 마련할 수 있었습니다. 이번은 20회로 정하고 있습니다.

실험

기존 방법과 이번 방법으로 통신량을 비교해 봅시다.
한 10초의 동영상을 두 가지 방법으로 10회 재생하여 Chrome의 개발자 도구로 측정한 결과 이렇게 되었습니다.



왼쪽이 기존의 방법이고 오른쪽이 이번 방법입니다.
페이지의 다른 요소에 관한 통신(100KB 정도)도 포함한 통신량입니다.
게다가 실은 종래의 방법은 실수하고 3회 정도 많이 재생하고 있습니다.
그들을 생각해도 10배 정도의 차이가 있는 것을 알았습니다.

주의점

하나의 동영상을 반복 재생할 때만 사용할 수 있는 방법입니다.
재생하는 동영상이 길면 캐시되지 않는 부분이 생기기 때문에 그다지 효과가 나타나지 않을 것으로 예상됩니다.