Firefoxでビデオ要素を強制的に再描画するにはどうすればよいですか？

Question

jQueryを使用して自動的に画面上に中心を置く動的なhtmlポップアップウィンドウ（絶対配置されたdiv）を開発しています。また、ウィンドウ・スクリーンの寸法に適合する、またはそれを超えるコンテンツを収容することもできます。

お客様の商品リストの横にある「もっと読む」リンクをクリックすると、このポップアップウィンドウが表示され、販売レターが表示されます。それぞれの販売レターには、製品をさらに詳しく説明するビデオも含まれています。

ポップアップウィンドウは、ウィンドウ内の閉じるボタンをクリックするか、またはその外側をクリックすることによって消されるまで、画面の中央に残ります。ユーザーがスクロールした場所とウィンドウのサイズを変更するかどうかに基づいて絶対位置を調整することにより、中央に残ります。

私の問題はビデオ要素にあります。 Firefox（すべてのもの）を除く他のすべてのブラウザでは、ユーザーがドキュメントをスクロールしたり、ビデオのサイズを変更したりすると、ビデオはポップアップウィンドウ内で完全にレンダリングされます。しかし、Firefoxでは、ユーザがスクロール/サイズ変更してポップアップウィンドウが絶対的な位置を調整すると、元の場所から現在の場所へ、またはビデオ画面が透明になるようにビデオが見えます。

私は、Firefoxを強制的にビデオ画面を再描画する必要があるかもしれないと考えました。私はこれを達成するためにいくつかの異なる方法を試しました。要素を消してすぐに再現させるだけでは、仕事をしていないようです。しかし、私がすぐにマージンや前後のポジションを調整すると、それはうまくいくように見えました。

まず、私はこの解決策を検討しました。しかし、私が他のブラウザでテストを始めたときに、この「動く」動きがブラウザの速度を落としているように見えました。特に、私はそれをChromeで気づきました（他のブラウザではまだテストしていません）。

私はこの修正をFirefoxに制限することを考えましたが、jQueryのブラウザデータフィールドは1.3では廃止されました。私はいつもブラウザを識別するためにJavaScriptを自分で作ることができましたが、ブラウザにビデオ要素を再描画させるより良い方法があるのだろうかと思っていました。あるいは、私は間違った軌道に乗っており、再描画する必要はありません。

私は、Firefox 3.0.1、クロム1.0.154.48は、Internet Explorer 7とSafariを使用しています。3.任意の入力が認識されるであろう

:)ここwiggleVids関数のコードです：

が**更新：コードを変更して、埋め込み要素がウインドウのスクロール機能にバインドする代わりに、ポップアップボックスの位置が変更されたときにのみ、埋め込まれた要素がウィグルされるようにしました。これは、クロムの実行を少しスピードアップしましたが、それはまだまだありません。それはまだ目立つ遅れです。

**更新2：Leeの提案に従い、ポップアップウィンドウに埋め込まれた動画が配列に格納されるようにコードを変更しました。このように、この関数が実行されると、ブラウザは埋め込みオブジェクトに対してDOMを何度も検索する必要はありません。 myVidsはグローバルに宣言され、ポップアップが閉じるとクリアされます。

function wiggleVids3() { 
    if (myVids.length <= 0) { 
     $('#popup embed').each(function(ctr) { myVids[ctr] = $(this); }); 
    } 

    if (myVids.length > 0) { 
     for(var ctr = 0; ctr < myVids.length; ctr++) { 
      var myObj = myVids[ctr]; 
      var temp = myObj.css("margin-top"); 
      var suffix = temp.substr(temp.length - 2,temp.length); 
      var currentMargin = ((suffix == 'px') || (suffix == 'em')) ? parseInt(temp.substr(0, temp.length - 2)) : parseInt(temp); 
      var newMargin = currentMargin + 2; 
      myObj.css('margin-top', newMargin + 'px'); 
      setTimeout(function(){ myObj.css('margin-top', currentMargin); }, 1); 
     } 
    } 
} 

Answer 1

はjqueryのは、それをサポートしていないにもかかわらず、私は、各ブラウザのために異なるコードを使用して、あなたがオフに優れていると思う、または唯一の特別なFirefoxのコードを「有効にする」Firefoxブラウザが検出されたとき。少し仕事であなたの問題を解決するように思えます。@Adamが言ったことに

-Adam

Answer 2

ビル、

HTMLを生成するための同様のインタフェースを持つオブジェクトを作成するためにFactory Patternとと組み合わせStrategy Patternを使用し、その後、各ブラウザのための1つを作成することができますそれは違った働きをします。

ああ、ファクトリはすべてのブラウザの検出を行い、オブジェクトを設定します。あなたがそれを取得するのではなく、配列に$（「＃ポップアップ埋め込み」）を保存した場合

• how-does-the-strategy-pattern-work