YouTube Data API v3.0 + JavaScriptで動画検索

  • 24
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

まずはGoogle Developers ConsoleでAPIをONにする

Google Developers Console

サイドバー[API·と認証] > YouTube Data API v3 を検索、ONにする
参考:プロジェクトを作成して API サービスを選択する

APIキーを作成

サイドバー[認証情報] > 公開APIへのアクセス > 新しいキーを作成 > ブラウザキー で新規作成
リファラーには設置するページのURLを記述

スクリーンショット-2015-04-22-15.46.41.png

JavaScriptで動画を検索する

今回はあるチャンネルの動画一覧を最新順で取得する

パラメータ
* part: snippet
* channelId: チャンネルのID(www.youtube.com/channel/****** の部分)
* order: date(日付順)

https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=(チャンネルID)&order=date&key=(APIキー)

ドキュメントのどれを見ていいかわかりづらいけどここからAPIを試すと楽
参考:Search: list

こんな感じのJSONがゲットできる

json
{
 "kind": "youtube#searchListResponse",
 "etag": "\"IHLB7Mi__JPvvG2zLQWAg8l36UU/B7HTIgYFvqFP1W51kJxRs_VPTEs\"",
 "pageInfo": {
  "totalResults": 2,
  "resultsPerPage": 5
 },
 "items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"IHLB7Mi__JPvvG2zLQWAg8l36UU/9Q6jCT_HeHFfR4LxWgkefRtExOk\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "J9VsVp7n6mg"
   },
   "snippet": {
    "publishedAt": "2009-08-05T10:45:24.000Z",
    "channelId": "UCnUSZE-pn6_g2DQu_d78fyw",
    "title": "ミニチュア風動画 - 福岡市中央区赤坂",
    "description": "http://akihiro.jugem.jp/?eid=259.",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/J9VsVp7n6mg/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/J9VsVp7n6mg/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/J9VsVp7n6mg/hqdefault.jpg"
     }
    },
    "channelTitle": "1977akihiro",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"IHLB7Mi__JPvvG2zLQWAg8l36UU/DeJNCRcU3l63qnGglawM3fqrD-A\"",
   "id": {
    "kind": "youtube#channel",
    "channelId": "UCnUSZE-pn6_g2DQu_d78fyw"
   },
   "snippet": {
    "publishedAt": "2009-08-05T10:42:18.000Z",
    "channelId": "UCnUSZE-pn6_g2DQu_d78fyw",
    "title": "Akihiro Koyanagi",
    "description": "",
    "thumbnails": {
     "default": {
      "url": "https://lh6.googleusercontent.com/-SY0gvXNZffo/AAAAAAAAAAI/AAAAAAAAAAA/YnViDwJiSzY/photo.jpg"
     },
     "medium": {
      "url": "https://lh6.googleusercontent.com/-SY0gvXNZffo/AAAAAAAAAAI/AAAAAAAAAAA/YnViDwJiSzY/photo.jpg"
     },
     "high": {
      "url": "https://lh6.googleusercontent.com/-SY0gvXNZffo/AAAAAAAAAAI/AAAAAAAAAAA/YnViDwJiSzY/photo.jpg"
     }
    },
    "channelTitle": "1977akihiro",
    "liveBroadcastContent": "none"
   }
  }
 ]
}

itemsを回して items->id->kind==="youtube#video" であれば
items->id->videoId が動画のID。

JavaScript
$.getJSON(
    apiUrl,
    {},
    function(json) {
        if (!json.items) return;
        for(var i in json.items){
            if (json.items[i].id.videoId && json.items[i].id.kind=="youtube#video"){
                listVideo.push(json.items[i].id.videoId);
            }
        }
    }
);