jQueryでYoutubeの指定したチャンネルの最新動画を表示する方法(お手軽版)
URLの確認
YouTube動画の情報は YouTube Data API を利用して取得することができます。
試しにブラウザで次のURLにアクセスしてください。
http://gdata.youtube.com/feeds/api/users/[username]/uploads
[username]の部分は取得したいユーザーネームに置き換えてください。
最新動画のfeed(xml形式)が表示されますね。
json形式で取得
「alt」パラメータを指定することで取得フォーマットを指定することができます。指定できるのは、atom、rss、json です。
jsで利用するにはxmlよりjson形式の方が扱いやすいのでjsonを指定します。
http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json
取得件数の指定
「max-results」パラメータで取得する件数を指定することができます。
ここでは3件としておきましょう。
http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json&max-results=3
パラメータは他にも色々ありますので詳しくは下記をご覧ください。
リファレンス ガイド: Data API プロトコル
サムネイルを表示して動画にリンクするパターン
あとは「$.getJSON」などで取得するだけです。
htmlで適当なidでマークアップしておきます。
html
<div id="youtube"></div>
javascript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { $.getJSON('http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json&max-results=3&callback=?', function (json) { var items = json.feed.entry; $.each(items,function(i){ $('#youtube').append('<div>'+ '<h3>'+ items[i].title.$t + '</h3>'+ '<a href="'+ items[i].link[0].href +'" target="_blank"><img src="'+items[i].media$group.media$thumbnail[0].url+'" /></a>' + '</div>'); }); }); }); </script>
サムネイルは結構大きなサイズが取得されるので適当なサイズを指定するか、thumbnail[1]などに変更すると小さめの他のサムネイルになります。
動画を直接再生するパターン
iframeで埋め込んでその場で再生するパターンもやってみます。
javascript
$(function() { $.getJSON('http://gdata.youtube.com/feeds/api/users/[username]/uploads?alt=json&max-results=3&callback=?', function (json) { var items = json.feed.entry; $.each(items,function(i){ var id = items[i].id.$t.replace('http://gdata.youtube.com/feeds/api/videos/',''); $('#youtube').append('<iframe width="560" height="315" src="http://www.youtube.com/embed/'+id+'?&rel=0" frameborder="0"></iframe>'); }); }); });
「id.$t」だと http から始まる id になるので正規表現で id のみ抜き出しています。
あとは公式の埋め込みコードを利用すればその場で再生できるようになります。
iframeの埋め込みオプションに「rel=0」を指定すれば再生後の関連動画を非表示にできます。