読者です 読者をやめる 読者になる 読者になる

youtubeの動画を連続再生するサンプル

ドキュメントにあるGetting Startedのサンプルをちょっと変えて、連続再生をさせてみました。
onStateChangeで再生終了イベントを拾い、リストの次のidを再生させてます。


ドキュメント
https://developers.google.com/youtube/iframe_api_reference


index.html

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

    <script>

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

      // 連続再生したい動画のidのリスト
      var video_ids = ['wruV4hykZqs', 'PdAgWmOKv_8']
      var now_playing_idx = 0;

      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: video_ids[now_playing_idx],
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // すぐに再生を始める
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 再生が終わったら次のvideo_idを再生する
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED && video_ids.length > now_playing_idx ) {
            player.loadVideoById(video_ids[++now_playing_idx])
        }
      }
      </script>
  </body>
</html>

index.htmlがあるフォルダでhttpサーバーを起動して

python -m SimpleHTTPServer

http://localhost:8000/index.html

を開くと再生が始まります