Youtubeの再生リストの動画を一覧表示する - Youtube Data API v3

2016-11-13

自分のプライベートなプロダクトで、 Youtube の再生リストの動画を一覧表示する機能が入れる必要がありまして、 Youtube Data API v3 のガイドを見ながらやっていましたが、スムーズに行かなかったので結論の実装方法をメモしておくことにしました。

実装方法

下記の 4 ステップを踏むと良かったです。

1. APIキーを取得する

こちらの手順を踏んで、API キーを取得します。

2. 表示したい動画のリクエストURLをリファレンスから調べます

自分の場合は、再生リストの一覧が欲しかったので、こちらのリクエスト URL が必要でした。

GET https://www.googleapis.com/youtube/v3/playlistItems

GET 形式で、この URL にリクエストをすれば良いようです。

3. 再生リストのIDを調べる

再生リストを表示したい場合は、再生リスト ID というのが必要なようでした。チャンネル ID とかも必要なのかなと思っていましたが、それは必要なかったです。

再生リスト ID は、例えば https://www.youtube.com/playlist?list=PLlVlyGVtvuVnAx-u38QOieyVIrMEmzuDx の再生リストの ID は、

PLlVlyGVtvuVnAx-u38QOieyVIrMEmzuDx

のように、URL の最後の部分になるようです。

4. Ajaxでリクエストを投げてレスポンスを表示する

Youtube Data API v3 のガイドだと、リクエスト URL に ?part= とかを付けて、受け取ってねとありましたが、 jQuery とかだと、下記のようにリクエストを投げても、無事に欲しいレスポンスが返ってくるので、自分はこっちで実装しました。

$.ajax({
  type: "get",
  url: "https://www.googleapis.com/youtube/v3/playlistItems", // リクエストURL
  dataType: "json",
  data: {
    part: "snippet", // partは必須で指定が必要とのこと。レスポンスで返してもらいたいデータをカンマ区切りで指定する。snippetがあればとりあえず動画を再生するレスポンスが受け取れる。
    playlistId: "PLlVlyGVtvuVnAx-u38QOieyVIrMEmzuDx", // 再生リストID
    maxResults: 20, // デフォルトは5件までしか受け取らないので、取得件数を変更
    key: "{APIキー}",
  },
})
  .done(function (response) {
    // 成功
  })
  .fail(function () {
    // エラー
  });

これで入力項目が問題なければ、成功するので、あとは、返ってきた response から動画を表示させれば良いです。

response.items.forEach(function (item) {
  var id = item.snippet.resourceId.videoId;
  $("#list").append(
    '&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/' +
      id +
      '" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;'
  );
});