1

よく知られているプラ​​グインにこの問題が発生するのは奇妙です。私はそれに対して何時間も戦い、ついに勝ちました。この投稿は、同じ問題に陥るすべての人に高く評価されると思います。

私が持っているとしますTwitter-Bootstrap（またはdivを折りたたむ/展開できる別の同様のフレームワーク）。ご存じのとおり、iframe をリンクのターゲットにして、さまざまな URL を表示することができます。この場合、一意の iframe に表示されるさまざまな YouTube ビデオを参照しています。

    <a href="https://www.youtube.com/embed/Bfwg4wRcnDI" target="#youtube-frame">
             Open this video into the youtube iframe
    </a>

#youtubecontainerの親である が折りたたまれ#youtube-frameているとします。リンク ターゲティング#youtube-frame(上記のコードのようなもの) をクリックすると、jQuery.onclickイベントを通じて#youtubecontainer展開されます。次に、それfitVids()に適用されます（コードのこの時点以外では実行できませんでした。実際、展開される前は、#youtubecontainer js には存在しませんでした）。しかし…驚き！

fitVids()は生の html から'src' 属性を取得し、それを iframe に適用して、たどったばかりのターゲット リンクをオーバーライドします!!! jQueryfitVids()プラグインは主に#youtube-frame「src」属性を参照しているようです。私の試み：

  • 特定のビデオを「src」に残すと、そのビデオは、クリックする他のビデオを上書きします。
  • 'src' を空のままにしておくか、属性を完全に削除しても、問題は解決されず、望ましくないビデオではなく、ブラック ボックスだけが表示されます。:D
  • リンクをもう一度クリックすると、最終的にリンクが表示されます。しかし、それは迷惑です。
  • jquery.fitvids.js (変数セレクター) を編集して、YouTube の「iframe src」セレクターをすべて削除し、「#youtube_frame」のエントリを追加しても、問題は解決しません。

私は疲れていた。私は可能な解決策だけを見つけました。また、このスクリプトの作成者がそれを強化してくれることを願っています...誰かがビデオ要素のアスペクト比を維持したい場合、要素の ID を指す代わりに、このスクリプトが「src」で物事を混乱させるのは本当に奇妙です。属性... フレームが 1 つの src しか処理できない場合と同じように.....

考えられる解決策:

  1. eventhandlersまたはを使用して、jQuery でタイミングを操作し、正しい順序を維持しsetTimeout()ます。これを行うには、動画へのリンク方法を変更する必要があります<a target="#youtube_frame"。fitVids よりも早く起動する を使用する代わりに、jquery でクリックを処理し、iframe の 'src' 属性を変更する必要があります。

正しい順序は次のとおりです。

  • 1) Expand the Video Container;
  • 2）fitVids()その上に。

  • 3)$('#youtube_frame').attr('src', $(this).attr('href'))

    (この最後のポイントは、srcクリックしたリンクからビデオの URL を取得して、iframe の属性を設定します)。もちろん、これはクリックイベントで実行される関数内に配置する必要があります。

他の解決策がある場合は、投稿してください。fixVids の作成者がこの問題を認識してくれることを願っています。個人的には、プラグインを完全に修正する方法がわかりません。「src」属性をそのままにしておくためです。

 EDIT: I've just added a testcase: http://jsbin.com/huzedamu/2/edit?js,output 
 Unfortunately jsbin doesn't allow the loading of youtube videos through its website, 
 but you can copy/paste the following pastebin, you'll see the bug more clearly:

 [no matter what video you choose, at the first try you'll always get what's 
  inside the iframe 'src' attribute, which in the pastebin is a pretty old video]

新しい単一ページのテストケース > [ http://pastebin.com/uLjJvhxC ]

4

1 に答える 1

0

ここに課題トラッカーがあります: https://github.com/davatron5000/FitVids.js/issues?direction=desc&sort=created&state=open

削減されたテスト ケースを作成することをお勧めします。

于 2014-03-13T14:24:04.813 に答える