Edited at

YouTubeの再生リストを取得してjsで出力するサンプル

More than 3 years have passed since last update.

YouTubeAPIを使用して、YouTubeの再生リストを取得し、再生リストに登録されている動画を順番に出力します。

APIキーが必要になりますので、下記リンクを参考に、APIキーを取得してください。

YouTube API APIキーの取得方法


サンプルファイル

デモ

デモファイルDL


解説


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 {$.Defferd}
*/

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();
}



  1. DOM構築後にgetJsonData(url)呼び出し、API関連の情報が記載されたJSONファイルを読み込みます。

  2. 読み込み完了後はそれぞれの値を変数に格納し、


  3. 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 {$.Defferd}
*/

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();
}




  1. loadingFlgで現在APIリクエストデータのローディング中かどうかのフラグを立てます。これは後ほど説明するスクロールイベントの処理で使います。


  2. getPlayList()関数内でYouTubeAPIを使って再生リストの情報を取得します。
    上記のような内容のリクエストで下記のようなjsonデータが返ってきます。

  3. 取得したjsonの値からnextPageTokentotalResultsを取得して変数へセット。


  4. 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();
}
}
});

});



  1. スクロールをして、スクロール位置が下部5%の位置に来た時に、再びaddContent()関数を実行し、DOMの追加処理を行います。
    この時、loadingFlg=trueの時はDOMへ追加する処理を行いません。

  2. ページの読み込みを進めて、現在のページが最後のページになった時は、スクロール処理をunbindします。


サンプルページ

サンプルファイル

サンプルファイルDL


備考

「YouTube IFrame API」と「API Client Library for JavaScript (Beta)」を使用した別バージョンのサンプルも作成しました。

YouTubeの再生リストを取得してjsで出力するサンプル(YouTube API活用編)