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

More than 1 year has passed since last update.


まずは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がゲットできる

{

"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。

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