2018.8.2

Youtube iframe APIを使ってみよう

どうも、kuroro0319です。

YoutubeはWebサイトに動画を埋め込む時にほぼ必須のツールになってますね。
通信環境によって、動画の画質を出し分けてくれたり、
色々なデバイスで再生できるようにしてくれたりと、とても助かっています。

ですが、埋め込んで再生する以上のことをしようとするとちょっと問題が発生することが多いです。
この前案件でYoutubeを埋め込んだのですが、ループ再生を対応するのに
Youtube iframe APIを使用して、ちょっと手間がかかったので、ここにメモがてら書いていきます。

まずはYoutubeの公式ページへ行こう

Youtube iframe APIはYoutubeの動画埋め込みを動的に制御する場合や、
再生開始時のイベントを取得して、Google Analyticsのクリックタグを動かしたいなどの、
よりカスタマイズしたい時に使います。

それでは、まずはYoutubeのiframe APIの公式紹介ページへ行きましょう。

「はじめに」という部分にAPIを使用するためのタグが書いてありますので、
サイトに記述してみましょう。

Youtubeの動画を埋め込もう

それでは埋め込んでみます。
※複数の動画を埋め込んでいるので、コードや挙動は若干以下と異なります。

<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: 'r2dPzuqhUt4',
      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>

簡単に表示されましたね。
それでは、次は本題であるループ再生をしてみましょう。

ループ再生をしてみよう

<script>
  // youtubeの埋め込み再生
  var tag = document.createElement('script');

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

  var videoID = 'r2dPzuqhUt4';

  var player2;
  function onYouTubeIframeAPIReady() {
    player2 = new YT.Player('player1', {
      height: '360',
      width: '640',
      videoId: videoID,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      },
      playerVars: {
        controls: 0, //再生ボタンとか出さない
        showinfo: 0, //動画名とか出さない
        disablekb: 1, //ショートカットキー無効
        rel: 0 //関連動画出さない
      }
    });
  }

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

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

動画のシークバーを消しているので、ちょっとわかりにくいかもですが、ループしています。
playerVarsという箇所で、その他にも動画名を出さなかったり、コントローラーを消したりしています。

動画の再生が終了したら、動画を最初に戻して、再度再生するというようにしているみたいです。
背景とかで延々ループ再生させる時に使いました。

Youtube iframe APIを使ってみての感想

導入はとても簡単で、非常に高機能なのですが、やはり動画ということもあり、
動作環境によっては非常に不安定になることがあります。
単純にiframeで埋め込みをした時よりも不安定になるような感じなので、
埋め込みできるならそっちの方が安定してていいのかなと思いました。

そういう面を除けば色々と設定をカスタマイズできるので、
楽しくてワクワクするので、とてもいいと思いました。
よいYoutube APIライフを送ってください。