FC2ブログ

http://dotinstall.com/lessons/youtube_jukebox_js/7608
を参考に Youtube API を使ってみます

2012年7月19日に仕様変更があり
onYouTubePlayerAPIReady が onYouTubeIframeAPIReady に変更

でもまだ
onYouTubePlayerAPIReady
は使えるらしい

いずれは使えないかもしれないけど

また、ベースURLも
http://www.youtube.com/player_api
から
http://www.youtube.com/iframe_api
に変更だけど
こちらも前のものが使える状態

サムネイルがクリックされたら
動画再生領域の div のところに再生が始まるようにする

これには
YouTube Player Tools > Player APIs >
IFrame API を使う

リファレンスは
https://developers.google.com/youtube/iframe_api_reference

要約すると
div で領域を設定して
スクリプトを読み込み
初期化していろいろやる

ということで必要な java script ファイルを読み込むため
<script src="http://www.youtube.com/player_api"></script>
をHTMLファイルに追記する

そして、java script ファイルで
プレイヤーに関する変数を用意して

function onYouTubePlayerAPIReady(){}
を用意する

ということで
ファイルの最初のあたりに
var player;
を追記して

最後のほうで
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: 360,
width: 640
});
}
を追加

height: 360,
width: 640
は幅と高さを設定

これで、F5で再読込すると
Youtube の再生の枠ができる

ただし、まだ何も再生できないので、この処理はまた次に行います
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック