YouTube APIを使用して(つまり、スクリプトでiframeを構築せずに)既存のiframeをターゲットにする方法を理解しようとしています。
いつものように、Googleは十分なAPIの例を提供していませんが、それはIS可能、ここでは http://code.google.com/apis/youtube/iframe_api_reference.html
これが私がやろうとしていることの例です-サムネイルの下のビデオが再生されるはずです。もうすぐですが、最初のビデオだけが再生されます...
YT_ready
、getFrameID
、およびonYouTubePlayerAPIReady
は、この回答で定義されている関数です。どちらのメソッドも、プリロードされたライブラリなしで実装できます。以前の回答では、単一フレームの機能を実装する方法を示しました。
この回答では、複数のフレームに焦点を当てています。
HTMLサンプルコード(重要なタグと属性は大文字です、<iframe src id>
):
<div>
<img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
<IFRAME ID="frame1" SRC="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" width="640" height="390" frameborder="0"></IFRAME>
</div>
<div>
<img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
<IFRAME ID="frame2" SRC="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" width="640" height="390" frameborder="0"></IFRAME>
</div>
JavaScriptコード(YT_ready
、getFrameID
、onYouTubePlayerAPIReady
およびYouTubeフレームAPIスクリプトローダーが定義されています ここ )
var players = {}; //Define a player storage object, to expose methods,
// without having to create a new class instance again.
YT_ready(function() {
$(".thumb + iframe[id]").each(function() {
var identifier = this.id;
var frameID = getFrameID(identifier);
if (frameID) { //If the frame exists
players[frameID] = new YT.Player(frameID, {
events: {
"onReady": createYTEvent(frameID, identifier)
}
});
}
});
});
// Returns a function to enable multiple events
function createYTEvent(frameID, identifier) {
return function (event) {
var player = players[frameID]; // Set player reference
var the_div = $('#'+identifier).parent();
the_div.children('.thumb').click(function() {
var $this = $(this);
$this.fadeOut().next().addClass('play');
if ($this.next().hasClass('play')) {
player.playVideo();
}
});
}
}
以前の回答では、onStateChange
イベントをバインドしました。この例では、初期化時に関数を1回だけ呼び出すため、onReady
イベントを使用しました。
この例は次のように機能します。
以下のメソッドは この回答 で定義されています。
onYoutubePlayerAPIReady
が呼び出され、YT_ready
を使用して定義されたすべての関数がアクティブになります。以下のメソッドの宣言をここに示しますが、 この回答 を使用して実装されています。例に基づく説明:
<iframe id>
の直後に配置される各<.. class="thumb">
オブジェクトをループします。id
が取得され、identifier
変数に格納されます。getFrameID
を介して取得されます。これにより、<iframe>
がAPI用に適切にフォーマットされていることが保証されます。 このサンプルコードでは、<iframe>
にIDを既に添付しているため、返されるIDはidentifier
と等しくなります。<iframe>
が存在し、有効なYouTube動画が存在する場合、新しいプレーヤーインスタンスが作成され、参照はキーplayers
でアクセスできるframeID
オブジェクトに保存されます。onReady
*イベントが定義されます。このメソッドは、APIがフレームに対して完全に初期化されたときに呼び出されます。createYTEvent
このメソッドは動的に作成された関数を返し、個別のプレーヤーに機能を追加します。コードの最も関連性のある部分は次のとおりです。
function createYTEvent(frameID, identifier) {
return function (event) {
var player = players[frameID]; // Set player reference
...
player.playVideo();
}
}
frameID
はフレームのIDであり、YouTubeフレームAPIを有効にするために使用されます。identifier
はYT_ready
で定義されているIDであり、必ずしも<iframe>
要素である必要はありません。 getFrameID
は、指定されたIDに最も近いフレームを見つけようとします。つまり、指定された<iframe>
要素のIDを返します。または、指定された要素が<iframe>
でない場合、関数は<iframe>
である子を探し、このフレームのID。フレームが存在しない場合、関数は指定されたIDを-frame
で後置します。その他のYouTubeフレームAPIの回答 。これらの回答では、YouTube Frame/JavaScriptAPIのさまざまな実装を示しました。