Help us understand the problem. What is going on with this article?

埋め込みYoutubeでループ再生時の通信を10分の1にした

More than 1 year has passed since last update.

よくあるループ手法の欠点

YoutubeをWebサイトに埋め込む時に1つの動画をループさせる方法として、
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>

これには3つの欠点があります。

  • ループするときに一瞬読みこみアニメーションが入る
  • ループした後に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秒の動画を2つの方法で10回再生し、Chromeの開発者ツールで計測した結果、こうなりました。

image.png

左が従来の方法で、右が今回の方法です。
ページの他の要素に関する通信(100KB程度)も含めた通信量です。
さらに実は従来の方法の方は間違えて3回ほど多く再生しています。
それらを考えても10倍程度の違いがあることが分かりました。

注意点

1つの動画をループ再生する場合にのみ使える方法です。
再生する動画が長い場合はキャッシュされない部分が出来るため、それほど効果が現れないだろうと予想されます。

wararyo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした