読者です 読者をやめる 読者になる 読者になる

おれんじりりぃぶろぐ

きっと何者にもなれないエンジニアのブログ

YouTube Data API v3を叩いてみる

暇を持て余しているのでドットインストールの

を視聴し始めたが、動画内ではAPIのバージョンが既にサポートが終了したV2でだったので
今回V3に置き換えてYoutube DataAPIを試してみた時のメモ。

やること

Youtube上の動画の検索、そして検索結果の動画をクリックすると再生を始めるところまで実装を行う。

Google開発キーを発行する

Youtube Data API v3を使用するためには開発キーが必須ぽいので発行作業を行う。今回はユーザー認証など特別な認証は行わないのでOAuthは使用しない。

上記にアクセスし、適当にプロジェクトを作成後、作成したプロジェクトを選択する。
左バーの[API]からYoutube Data API v3を有効にする。
さらに[認証情報]から開発キーの発行を行う。

f:id:orange_lily27:20150726184802p:plain

検索を実装する

まずは検索部分の実装を行う。

index.html

ヘッダ部分

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="myscript.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>

フォーム部分

<form id="search" onsubmit="return false;">
<input type="text" id="q" size="40">
<button type="submit" value="検索" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>

検索結果の表示部分

<p>検索結果</p>
<ul id="list"></ul>

続いて、JavaScript側の実装を行う。

myscript.js

$('#search').submit(function(){
    var url = "https://www.googleapis.com/youtube/v3/search";
    var options = {
      q: $('#q').val(),
      part: 'snippet',
      key: '[MY_KEY]',
      maxResults:10
    };
    // リソースの取得
    $.get(url, options, function(rs){
      console.log(rs);
      $('#list').empty();
      for(var i=0; i<rs.items.length; i++){
        var id = rs.items[i].id.videoId;
        var thumbnails = rs.items[i].snippet.thumbnails.medium.url;
        var title = rs.items[i].snippet.title;
        $('#list').append($('<li class="movie">').append($('<img>').attr('src', thumbnails)).data('video-id', id).data('thumbnail', thumbnails).append('<p>' + title + '</p>').data('video-title', title));
      }
    }, "json");
  });

オプション指定はpartkeyは必須項目。qで検索ワードを指定することができる。maxResultsで検索結果の件数を指定することができる。省略した場合はデフォルトの5が指定されている。
get関数でオプションとurlを渡すと結果はrsに格納される。受けとった動画のサムネイルとタイトル情報をid=list属性に動的に追加している。

*CSSにbootstrapを使用している。

プレイヤーを実装する

検索結果が表示出来るようになったので、続いてプレイヤー部分を実装する。

ここに書いてあるように実行すれば簡単にプレイヤーを実装することができる。

index.html

<div id="player"></div>

myscript.js

プレイヤーの初期化

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

eventsでは任意のタイミングでイベントを実行させることができる。省略することもできる。

$(document).on('click', 'li.movie img', function(){
    var videoId = $('li.pmovie img').$(this).data('video-id');
    player.loadVideoById(videoId);
  });

検索結果のリストのサムネイル画像をクリックすることで動画再生が開始される。