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
は幅と高さを設定
これで、F５で再読込すると
Youtube の再生の枠ができる
ただし、まだ何も再生できないので、この処理はまた次に行います