17

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

いつものように、Googleは十分なAPIの例を提供していませんが、それは可能であると説明しています。http：//code.google.com/apis/youtube/iframe_api_reference.html

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

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

4

1 に答える 1

37

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およびgetFrameIDYouTube Frame APIスクリプトローダーはここで定義さonYouTubePlayerAPIReadyれます）

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イベントをバインドしました。この例ではonReady、初期化時に関数を1回だけ呼び出したいので、イベントを使用しました。

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

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

    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用に適切にフォーマットされていることが保証されます。このサンプルコードでは、identifierすでにIDをに添付しているため、返されるIDはに等しくなり<iframe>ます。
    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();
    }
}
      • frameIDYouTubeフレームAPIを有効にするために使用されるフレームのIDです。
      • identifierで定義されたIDでありYT_ready、必ずしも<iframe>要素である必要はありません。getFrameID指定されたIDに最も近いフレームを見つけようとします。つまり、指定された<iframe>要素のIDを返します。または：指定された要素が、でない場合<iframe>、関数は、である子を探し、<iframe>このフレームのIDを返します。フレームが存在しない場合、関数は指定されたIDを。で後置します-frame。
      • players [playerID] `は、初期化されたプレーヤーインスタンスを参照します。

この回答のコア機能はそれに基づいているため、この回答も必ず確認してください。

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

于 2012-01-21T00:27:14.133 に答える