YouTube Player API で動画を制御する

fujihara

2015.02.25

どうもお久しぶりです fujihara です。

春一番が吹き荒れ街も暖かくなってきましたね。
季節の変わり目って布団の量が難しくて風邪を引きやすいと私は
思っているので皆さんもお気をつけ下さい。

本日はYouTube Player API で動画を制御します。

目的

業務で YouTube を連続で再生させたいという依頼があり使用しました。
(詳細は省きます)

コード

以下Googleのサンプルコードです。** 参考 ** iframe 組み込みの YouTube Player API リファレンス


<div id="player"></div>

<script>

  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('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

説明

では簡単にサンプルコードの説明をしていきます。
以下はYouTube iframe を入れるターゲットです


<div id="player"></div>

次にYouTube APIを使用するためのコードのローディングです。


  var tag = document.createElement('script');

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

では各種APIの中身を説明していきます
まず onYouTubeIframeAPIReady関数です。これは上記で読み込んだAPIが使用できたときに呼ばれます。まず YT.Playerを呼び出し変数に割り当てています。
1つ目の引数がtargetID 、2つ目が各種 API用のオプションになります。
ここでは高さと、横幅、そして videoId(再生する動画）、そしてeventsが登録されています。
'onReady' は YT.Playerが動作可能になったときに呼ばれます。
'onStateChange' は YT.Playerの状態が変化したときに呼ばれます。(再生、停止、終了など)


  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

ではイベント(onReady, onStateChange)関数をそれぞれ説明します。
こちらonReady用の関数です。呼ばれると同時に動画を再生します。


  function onPlayerReady(event) {
    event.target.playVideo();
  }

でこちら onStateChange用の関数です。状態が変わったときeventを取得しevent.dataでYT.Playerの状態が取得できます。
ここでは流れ始めて6秒後に動画を止める処理をしています。


  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

リンクから動作が確認できます。jsfiddle (修正しました)

連続で流す

では目的である動画を連続で流す処理を加えていきます。
一番初めに書きましたコードを少しだけ変更します。おもに onYouTubeIframeAPIReady 関数と onPlayerStateChange 関数です。


  var player;
  var videoList = [
    'ZzefiqgJAos',
    'dfdu2r7NSIk',
    'RbK8a8HM_OA'
  ];
  videoIndex = 0;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: videoList[videoIndex],
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == 0) {
      videoIndex++;
      videoIndex = videoIndex % videoList.length;
      event.target.loadVideoById(videoList[videoIndex]);
    }
  }

説明

まず連続で流すYouTube Video ID を配列で持ちます。
そして最初に読み込むのは videoList[0] の動画です。
動画が再生し終わるとonPlyaerStateChangeが呼ばれます。
動画終了時のみ動画リストの index を増やし YT.Playerに次の動画のIDを指定し読み込ませます。参考 jsfiddle 修正しました