web-dev-qa-db-ja.com

YouTube APIターゲット（複数）の既存のiframe

YouTube APIを使用して（つまり、スクリプトでiframeを構築せずに）既存のiframeをターゲットにする方法を理解しようとしています。

いつものように、Googleは十分なAPIの例を提供していませんが、それはIS可能、ここでは http://code.google.com/apis/youtube/iframe_api_reference.html

これが私がやろうとしていることの例です-サムネイルの下のビデオが再生されるはずです。もうすぐですが、最初のビデオだけが再生されます...

http://jsfiddle.net/SparrwHawk/KtbYR/2/

javascriptyoutube-apiyoutube-javascript-api
16
SparrwHawk

TL; DR：デモ： http://jsfiddle.net/KtbYR/5/

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イベントを使用しました。

この例は次のように機能します。

  • 以下のメソッドは この回答 で定義されています。

    1. YouTubeフレームAPIは http://youtube.com/player_api から読み込まれます。
    2. この外部スクリプトの読み込みが完了すると、onYoutubePlayerAPIReadyが呼び出され、YT_readyを使用して定義されたすべての関数がアクティブになります。

  • 以下のメソッドの宣言をここに示しますが、 この回答 を使用して実装されています。例に基づく説明：

    1. <iframe id>の直後に配置される各<.. class="thumb">オブジェクトをループします。
    2. 各フレーム要素で、idが取得され、identifier変数に格納されます。
    3. Iframeの内部IDは、getFrameIDを介して取得されます。これにより、<iframe>がAPI用に適切にフォーマットされていることが保証されます。 このサンプルコードでは、<iframe>にIDを既に添付しているため、返されるIDはidentifierと等しくなります。
    4. <iframe>が存在し、有効なYouTube動画が存在する場合、新しいプレーヤーインスタンスが作成され、参照はキーplayersでアクセスできるframeIDオブジェクトに保存されます。
    5. プレーヤーインスタンスの作成時に、** onReady *イベントが定義されます。このメソッドは、APIがフレームに対して完全に初期化されたときに呼び出されます。

    6. 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で後置します。
      • player [playerID] `は初期化されたプレーヤーインスタンスを参照します。

この回答のコア機能はそれに基づいているため、またチェック この回答 であることを確認してください。

その他のYouTubeフレームAPIの回答 。これらの回答では、YouTube Frame/JavaScriptAPIのさまざまな実装を示しました。

35
Rob W