車輪を再発明 / koba04の日記 このページをアンテナに追加 RSSフィード Twitter

2012-10-30

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

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

前回のはこちら

http://d.hatena.ne.jp/koba04/20110227/1298736386


iframeAPIでiPhone対応

埋め込み方法
  • 方法は簡単でサンプルにある通りこんな感じで簡単です。
  <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>

これで検索した結果を連続再生することが出来るようになります。

こんな感じ。

f:id:koba04:20121030005500p:image:w360

画像を見てもらうとわかるのですが、再生/停止ボタンの隣に次の動画への▷のボタンが、さらに再生リストもプレイヤーの中に表示されるようになってユーザーがサムネイルから動画を選べるようになっています。


PetaTubeの場合は、こちらで管理したかったのでcuePlaylistは使わなかったのですが、ただ動画を連続再生させたい場合はとても簡単に出来るので便利です。


また前回のサンプルでは動画の数が残り少なくなってきたら裏でリクエスト投げてさらに動画を追加するということをやっていたのですが、そういう事やる場合は、自分でリストを管理する方法がいいとおもいます。

http://koba04.com/youtube/index.html


https://github.com/koba04/YouTube-Continuous-Player

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元
Connection: close