YouTubeの動画を簡単に連続再生させてみる(iPhone対応とcuePlaylist)

以前に書いたYouTubeをJavaScriptから連続再生させる方法について書いた記事が今でも時々見られているようだし、PetaTube作るときに調べたこともあるので改めて書いてみます。

前回のはこちら
http://d.hatena.ne.jp/koba04/20110227/1298736386

iframeAPIでiPhone対応

https://developers.google.com/youtube/iframe_api_reference
いつのまにかiframeAPIというのが登場していて、これを使うと環境に応じてFlash版とHTML5版を出し分けてくれるので、今までのAPIだと表示されなかったiPhoneやiPadでも表示出来るようになります。素晴らしい！

埋め込み方法

方法は簡単でサンプルにある通りこんな感じで簡単です。

  <div id="video"></div>が定義してあるとする。（ここがYouTubePlayerに置き換えられる）

  var w = window, player;

  // ここはドキュメントにある通り
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  w.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('video', { // 置き換えるHTML要素のid
      height: '450',
      width: '800',
      videoId: 'cfOa1a8hYP8',  // 再生したいvideoのid
      events: {
        // プレイヤーの準備が出来た時に何かしたい場合
        onReady: function() {
        },
        // プレイヤーの状態が変わった時に何かしたい場合
        onStateChange: function(e) {
          // 再生が終わった時に何かしたい場合
          if ( e.date == YT.PlayerState.ENDED ) {
          }
        },
        // エラーが起きた時(埋め込めない動画を指定したときなど)
        onError: function() {
        }
      }
    });
  };

PetaTubeの場合は、すでに削除された動画や埋め込みが許可されてない動画あった場合、onErrorで受け取ってSkipさせています。

cuePlayListで簡単連続再生

これのドキュメントを読んでいたところcuePlayListというものがあることを知って、これ使えば簡単に動画のリストを再生出来るんじゃないかと思って試してみました。

これだけで検索した結果の動画を連続再生することが出来ます。こちらでindexの管理もしなくていいので簡単ですね。

 <!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>YouTubeを連続再生してみる(iframe api)</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
<h1>YouTubeを連続再生してみる(iframe api)</h1>
<input type="text" id="query" size="50" placeholder="検索ワードを入力してね" />
<input type="button" id="search" value="検索" /><br />
<div id="video"></div>
<script>
jQuery(function($) {
  var w = window, player;

  // 最初は隠しておく
  $('#video').hide();

  // https://developers.google.com/youtube/iframe_api_reference
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  w.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('video', {
      height: '450',
      width: '800',
     // videoIdはこの段階ではセットしていない
      events: {
        onReady: function() {
          // 最後まで終わったらまた最初から再生されるように
          player.setLoop(true);
        }
      }
    });
  };

  // ここからは動画の検索
  $("#search").click(function() {
    var query = $("#query").attr("value");
    if ( !query ) {
      return;
    }

    $.ajax({
      url: 'http://gdata.youtube.com/feeds/api/videos?',
      dataType: 'jsonp',
      data: {
        'q': query,
        'alt': 'jsonc',
        'v': 2,
        'max-results': 50,
        'format': 5,
        'orderby': "viewCount",
        'start-index': 1
      }
    }).done(function(data) {
      // 再生中の動画があれば止めて消す
      player.stopVideo(); 
      player.clearVideo(); 
      $('#video').fadeIn();
      var videos = [];
      $.each(data.data.items, function() {
        videos.push(this.id);
      });
      // sort by favorite
      videos = videos.sort(function(a, b) {
        return b.favoriteCount - a.favoriteCount;
      });
      // ここでキューに動画のIDを突っ込むだけ
      player.cuePlaylist(videos);
    });
  });
});
</script>
</body>
</html>