YouTubeAPIを使用して、YouTubeの再生リストを取得し、再生リストに登録されている動画を順番に出力します。
APIキーが必要になりますので、下記リンクを参考に、APIキーを取得してください。
YouTube API APIキーの取得方法
サンプルファイル
- youtube_playlist
- sample1
- css ：CSSファイル
- img ：画像ファイル
- js ：jsファイル
- lib ：jsライブラリ（jQueryなど）
- index.js
- youtube_api_info.json
- index.html
- sample1
解説
DOM構築後の処理
jsファイル内にAPIキー等の情報を持たせたくなかった（ソースで丸見えなのを防ぎたい）ので、それらの情報は「youtube_api_info.json」に持たせるようにしました。
index.js
$(function(){
//API関連のjsonデータを取得
getJsonData(YT_API_JSON_INFO_URL)
.then(function(_jsonData){
ytApiKey = _jsonData.apiKey;
ytApiUrl = _jsonData.reqUrl;
ytPlaylistId = _jsonData.listId;
//コンテンツをDOMに追加
addContent();
});
});
/**
* jsonのデータを取得する
* @param {String} JSONデータのURL
* @return {$.Deferred}
*/
function getJsonData(_url){
//console.log('getJsonData()開始：'+_url);
var $dfd = $.Deferred();
$.ajax({
url:_url,
dataType:'json',
cache:false,
timeout:15000
})
.done(function(_data){
//console.log('json取得成功：'+_url);
$dfd.resolve(_data);
})
.fail(function(_data){
console.log('json取得error：'+_url);
$dfd.reject(_data);
})
.always(function(_data){
//console.log('getJsonData()終了：'+_url);
});
return $dfd.promise();
}
- DOM構築後に
getJsonData(url)呼び出し、API関連の情報が記載されたJSONファイルを読み込みます。 - 読み込み完了後はそれぞれの値を変数に格納し、
-
addContent()関数を呼び出してHTMLのDOMに情報を追加しています。
addContent()関数内の処理
index.js
/**
* 再生リストを取得して、コンテンツを追加する
*/
function addContent(){
loadingFlg = true;
getPlayList()
.then(function(_resData){
nextPageToken = _resData.nextPageToken != undefined ? _resData.nextPageToken : '';
totalResults = _resData.pageInfo.totalResults;
totalPage = Math.ceil(totalResults / REQ_QTY);
insertVideo(_resData);
loadingFlg = false;
});
}
/**
* YouTubeの再生リストを取得する
* @return {$.Deferred}
*/
function getPlayList(){
//console.log('getPlayList()開始：'+ytApiUrl);
var $dfd = $.Deferred();
$.ajax({
type: 'get',
url: ytApiUrl,
dataType:'json',
data: {
part: 'snippet',
playlistId : ytPlaylistId, //再生リストのID
maxResults : REQ_QTY, //取得件数
pageToken : nextPageToken, //総件数が取得件数以上の時に続きのデータを取得するためのパラメータ
key: ytApiKey //APIキー
},
dataType: 'json',
cache: false,
timeout: 15000
})
.done(function(_data) {
//console.log('再生リスト取得成功：' + ytApiUrl);
$dfd.resolve(_data);
})
.fail(function(_data) {
console.log('再生リスト取得error：' + ytApiUrl);
$dfd.reject(_data);
})
.always(function(_data) {
//console.log('getPlayList()終了：' + ytApiUrl);
});
return $dfd.promise();
}
-
loadingFlgで現在APIリクエストデータのローディング中かどうかのフラグを立てます。これは後ほど説明するスクロールイベントの処理で使います。 -
getPlayList()関数内でYouTubeAPIを使って再生リストの情報を取得します。 上記のような内容のリクエストで下記のようなjsonデータが返ってきます。 - 取得したjsonの値から
nextPageTokenとtotalResultsを取得して変数へセット。 -
insertVideo()関数で取得したjsonを解析して、DOMに追加しています。
{
"kind": "youtube#playlistItemListResponse",
"etag": "\"oqbvhYxBE6fAbRk6m7aLlHf5s1I/nYqIbgUq7tWbu539fSVHZI9z7hI\"",
"nextPageToken": "CAMQAA",
"pageInfo": {
"totalResults": 20,
"resultsPerPage": 3
},
"items": [
{
"kind": "youtube#playlistItem",
"etag": "\"oqbvhYxBE6fAbRk6m7aLlHf5s1I/3ArqdiAXaxdE2rkMYioNa8Blzlw\"",
"id": "PLQn23NEIwkU3eLnew2igtf4HRoXtnPKbw",
"snippet": {
"publishedAt": "2012-04-25T13:49:04.000Z",
"channelId": "UCiIhyfVWGSJLHMqnZMJX2hA",
"title": "猫 洗顔中 ネコ",
"description": "気持ちよさそうですね。\r\nいろんな猫再生リスト\r\nhttp://www.youtube.com/playlist?list=PL0701DD1EA18F89C6&feature=view_all",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/Z3r8V-S2B38/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/Z3r8V-S2B38/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/Z3r8V-S2B38/hqdefault.jpg",
"width": 480,
"height": 360
},
"standard": {
"url": "https://i.ytimg.com/vi/Z3r8V-S2B38/sddefault.jpg",
"width": 640,
"height": 480
}
},
"channelTitle": "Urara1966 ASMR",
"playlistId": "PL0701DD1EA18F89C6",
"position": 0,
"resourceId": {
"kind": "youtube#video",
"videoId": "Z3r8V-S2B38"
}
}
}
]
}
無限スクロール処理
index.js
$(function(){
$(window).bind('scroll', function(e) {
if(currentPage == totalPage){
$(window).unbind('scroll');
return;
}
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05){
//スクロールの位置が下部5%の範囲に来た場合
if(!loadingFlg){
addContent();
}
}
});
});
- スクロールをして、スクロール位置が下部5％の位置に来た時に、再び
addContent()関数を実行し、DOMの追加処理を行います。 この時、loadingFlg=trueの時はDOMへ追加する処理を行いません。 - ページの読み込みを進めて、現在のページが最後のページになった時は、スクロール処理をunbindします。
サンプルページ
備考
「YouTube IFrame API」と「API Client Library for JavaScript (Beta)」を使用した別バージョンのサンプルも作成しました。