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

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

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

##サンプルファイル
デモ
デモファイルDL

• youtube_playlist
  • sample1
    • css　：CSSファイル
    • img　：画像ファイル
    • js　：jsファイル
      • lib　：jsライブラリ（jQueryなど）
      • index.js
      • youtube_api_info.json
    • index.html

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

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

1. loadingFlgで現在APIリクエストデータのローディング中かどうかのフラグを立てます。これは後ほど説明するスクロールイベントの処理で使います。
2. getPlayList()関数内でYouTubeAPIを使って再生リストの情報を取得します。
   上記のような内容のリクエストで下記のようなjsonデータが返ってきます。
3. 取得したjsonの値からnextPageTokenとtotalResultsを取得して変数へセット。
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活用編)