youtube再生リストをブログに貼り付けてランダム再生

2010/03/13　その他雑記 | コメント(0)

[この記事は旧記事です。新しく記事を書きました。]

[JSON-C版追記しました。詳しくは記事の下のほうを読んでください]

久々の技術系ネタです。

ブログの矢印の部分に動画が掲載されているのはご存知でしょうか？　以前はこちらにyoutubeの再生リストというものを表示させていました。再生リストは、好きな動画を登録すると連続で動画を見せることができます。youtube上では、ランダム再生ができるようになっていますが、なぜかブログにembedで貼り付けするとランダム再生ができません。
これでは、このリストを見た方が、毎回最初に同じ動画を見なければいけなくなります。

そこで、Youtube Data APIとJavascriptを使ってページをリロードするたびに、リスト内の動画をランダムで１つ取り出し表示されるようにしました。

まず貼り付けタグ。

<script type="text/javascript" src="ylistrandom.js"></script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/playlists/A43739755D0CD2E2?max-results=50&alt=json-in-script&callback=ylistrandom"></script>

非常にシンプルです。パスを揃えて、この２つを貼りつければ動作します。

「http://gdata.youtube.com/feeds/api/playlists/プレイリストID?max-results=最大取得件数&alt=json-in-script&callback=コールバック関数」と入れてやると、プレイリストに含まれる動画の情報がJSONで取得できます。

次は肝心のylistrandom.jsの中身です。

function ylistrandom(youtube) {
var entries = youtube.feed.entry;
var url = [];
for (var i = 0; i < entries.length; ++i) {
url.push(entries[i].media$group.media$player[0].url.substr(31,11));
}
var src= url[Math.floor(Math.random()*url.length)];
document.write('<embed src="http://www.youtube.com/v/' + src + '&hl=ja_JP&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="165"></embed>')
}

青い部分がリストからの処理部分。
ループさせながら、リストに含まれている動画のアドレスを取得します。substrを使って、アドレス全てではなく動画ID部分のみを配列に保存します。

オレンジの部分が、ランダム処理。
配列の中からランダムで一つリストの数字を取り出します。

水色の部分が、動画表示部分
Youtube Data APIでそのまま取得した動画アドレスではブログに貼り付けできないため、加工して貼り付けできるように調整しています。

＊2010/03/13 追記

JSON-C対応版を作ってみました。こっちのほうが格段にシンプルに動画IDを取得できます。次はプレイリストの動画を50個以上取得してランダムに表示させる仕組みを作りたいなぁ。

JSON-C版ylistrandom.jsの中身

function ylistrandom (youtube) {
var entries = youtube.data.items;
var src= entries[Math.floor(Math.random()*entries.length)].video.id;
貼付け部分は同じです。

JSON-CのURL

http://gdata.youtube.com/feeds/api/playlists/A43739755D0CD2E2?v=2&alt=jsonc&max-results=50&callback=ylistrandom

関連記事

このページのトップに戻る

名前
メールアドレス(任意)
WEBサイト(任意)
コメント
パスワード
	管理者にだけ表示を許可する

このページのトップへ戻る