どうやらiframeを使った埋め込み方法がバージョンアップしたようだ。
まず、非同期でscriptを読み込む
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);次に、APIの準備が整った時点で呼ばれるonYouTubeIframeAPIReady関数に動画を埋め込む処理を書く
window.onYouTubeIframeAPIReady = function() { new YT.Player('player', { height: '390', width: '640', videoId: 'Ma5xXTEMBJs', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }第一引数には、動画を設置するidを設定する。
(上の場合は、id="player")
eventsキーには、動画の準備が整った時に呼び出される関数をonReadyキーに登録し、動画の状態が変化した時に呼び出される関数をonStateChangeに登録する。
で、下のように、それぞれの関数を実装する。
window.onPlayerReady = function(event){ };
window.onPlayerStateChange = function(event){ /* YT.PlayerState.ENDED YT.PlayerState.PLAYING YT.PlayerState.PAUSED YT.PlayerState.BUFFERING YT.PlayerState.CUED */ console.log(event.data) };flashを使わない分、読み込み早いかもしれない。
0 コメント:
コメントを投稿