Youtubeを連続再生するサンプル2

javascript

このあいだなんとなく描いてみたYoutubeをjsで連続再生するサンプルですが、埋め込みが不許可の動画が入っているとそこで再生がストップしてしまうので、その場合、処理を飛ばすようにしてみました。

<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', 'RCtNM77fDck', 'PdAgWmOKv_8']

      var player;
      var now_playing_idx = 0;
      var current_status = -1;
      
      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) {
            next();
        }

        if (current_status !== -1 && event.data == -1) {
            setTimeout(function(){
                if (current_status == -1){
                    console.log('can\'t play video. go next');
                    next();
                }
            }, 5000);
        }

        current_status = event.data;
      }
      
      function next(){
        if(video_ids.length > now_playing_idx + 1 ){
            player.loadVideoById(video_ids[++now_playing_idx])
        } else {
           console.log('auto play end');
        }
    }
      </script>
  </body>
</html>


ま、連続再生は公式の再生リストを使えって感じですけど。