3

内部にいくつかの内部（つまり、srcなし）のiframeを含むWebサイトがあり、そこに（APIを使用して）Youtubeプレーヤーを含めたいと考えています。つまり、親ページによって管理される iframe 内のプレーヤーが必要です。

問題は、コードの初期化、AFAIKがiframeで機能していないことです。例えば：

var player = new YT.Player('video-player1', {});

ご想像のとおり、問題は、その ID が含まれるドキュメントを定義できないことです。jQuery では、次のようなものを使用します。

$("video-player1", frames["iframe1"].document)

これに対する回避策はありますか? 私が見ることができる唯一の解決策は、明らかに、すべての iframe に YT API をロードし、任意の iframe 内で作業することですが、それは、Youtube JS ファイルを数回ロードする追加コストに加えて、アプリケーションから多くのロジックをリファクタリングすることを意味します。

4

1 に答える 1

3

ごめんなさい。問題の解決策は、コーディング/実装は「簡単」ですが、維持するのは面倒で困難です。

Youtube API では、YT.Player オブジェクトを iframe 内 (iframe 内の div など) に埋め込むことはできません。これは、iframe ドキュメントではなく、window オブジェクト内で「プレーヤー」ノードを検索するためです。

したがって、これに対する簡単なホットフィックスは、API ファイルのコピーを保存し、それらを変更してこの機能を追加することです。明らかに、その瞬間から、これらのファイルを提供し、ファイルが非推奨にならないように更新するのはあなたの責任です。

解決策は次のとおりです（当然のことながら、JQueryはYoutube APIの前にロードされます）：

https://developers.google.com/youtube/iframe_api_reference#Getting_Startedで提供されている基本例を使用すると、<iframe id="if"></iframe>代わりにこれ が<div id="player"></div>あり、後でその iframe 内にプレーヤー div を追加すると思います。

<body>
    <iframe id="if"></iframe>

    <script>
        $('#if').contents().find('body').append($('<div id="player"></div>'));
        // ...

したがって、 を定義するときは、コンストラクターonYoutubeAPIReady()に 1 つのパラメーターを追加する必要があります。YT.Player

function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', { /* options */ }, $('#if') );

つまり$('#if')、プレーヤーを埋め込む iframe 要素です。

iframe_api

このファイルでは、ロードするスクリプトの src を変更するだけです。

から a.src = 'http://s.ytimg.com/yts/jsbin/www-widgetapi-vflOb0oo1.js

(widget.jsはa.src = './widget.js';www-widgetapi-vflOb0oo1.js のコピーです)。

最後に、widget.js で:

ここで、次の 2 つの関数を変更する必要があります:function S(a,b)とfunction Y(a,b).

まず、iframe パラメータを取得しますfunction Y(a,b)。function Y(a,b,c)次に、その本体で次のように変更S.call(this,a,new nb(b));しますS.call(this,a,new nb(b),c);

第二に、function S(a,b)へfunction S(a,b, dom)とc = documentへ c= dom === undefined ? document : dom.contents()[0]。

これで、iframe 内に Youtube プレーヤーがあり、親ウィンドウから使用できるようになりました。

役に立つことを願っています！;)

于 2013-10-17T18:03:57.683 に答える