× 無料のユーザー登録をすると学習状況を管理することができるようになります

YouTubeでジュークボックスを作ろう (全14回)

YouTubeのAPIを活用し、複数の動画ファイルを連続再生させるジュークボックスを作ってみましょう。

このレッスンでは YouTube API v2.0 / jQuery 1.7.2 を使用しています。

#04 YouTube APIを使ってみよう
2016年9月1日
レッスン内にて使用している YouTube Data API v2 は 2015年4月20日にサービスを終了しています。現在は以下を参考に YouTube Data API v3 を使うようにしてください。

・API Reference | YouTube Data API (v3) | Google Developers
https://developers.google.com/youtube/v3/docs/?hl=ja
2012年7月20日
YouTube APIの公式サイトはこちらです。日本語版もありますが、英語版の方が最新の情報が掲載されているので可能ならばこちらに慣れておくようにしましょう。
https://developers.google.com/youtube/
また検索時のAPIパラメータの一覧はこちらです。
https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters
慣れてきたらパラメータの値を変更したり、他のパラメータを使ったりするところからプログラミングのスキルアップをしていきましょう。
#05 Ajaxで検索結果を取得してみよう
2012年7月18日
JSONPで実装する場合は、$.getを利用している箇所で代わりに$.ajaxを使うようにします。

$.ajax({
    url: url,
    data: options,
    dataType: 'jsonp',
    success: function(rs) {
        // ここの関数の内容は $.get のコールバック関数と同じでok
    }
});

IEなどで動作しない場合もこの方法なら動きますので、試してみてください。
2013年9月9日
YouTubeのAPIは大丈夫ですが、すべてのAPIが $.get() でデータを取得できるとは限りません。

これはAjaxで利用される XMLHttpRequest が、異なるドメイン間の通信(クロスドメイン通信)を許可されていないためです。

もし他のWebサービスのAPIを試してデータが取得できず、コンソールに「XMLHttpRequest cannot load ... Origin ... is not allowed by Access-Control-Allow-Origin.」のようなエラーが出た場合はそれに該当します。

その場合は JSONP という代替手段を利用する必要があります。
#08 Player APIを使ってみよう
2012年7月23日
2012年7月19日に仕様変更があり、ドキュメントでは onYouTubePlayerAPIReady が onYouTubeIframeAPIReady に変更されていますが、 onYouTubePlayerAPIReady もそのまま使用可能です。

また、index.htmlで読み込んでいる http://www.youtube.com/player_apihttp://www.youtube.com/iframe_api に変更されていますが、どちらでも動作します。

https://developers.google.com/youtube/iframe_api_reference?hl=ja#Revision_History