/ / HTML5、FirefoxがjQuery挿入後に重複するビデオを再生する - jquery、firefox、html5、html5-video

HTML5、FirefoxはjQueryの挿入後に重複した動画を再生する - jquery、firefox、html5、html5-video

私たちが取り組んでいるプロジェクトから以下を抽出しました。

http://www.bridgedev1.com/videotest.html

予想されるように、これはブラウザに応じてOGVまたはM4Vビデオを再生します。

ページがロードされ、次にjQueryを使ってビデオが取り込まれます。これはSafariとChromeで完璧に機能します。

問題はFirefox(3.6.3)にあります。ビデオを一時停止しても、ビデオの2枚目のコピーはまだ再生中です。

Firebugでvideo要素を削除すると、最初は目に見えるビデオですが、2番目のビデオを再生したときのサウンドトラックは残りました。 [ネットワークトラフィック]タブでは、7.2 MBのビデオも2回読み込まれていることがわかりました。

この問題は、WindowsとMacの両方で発生し、PCではさらに悪化します。

誰もが解決策を提供できますか?

ありがとう

ジム

回答:

回答№1は2

ビデオタグを挿入するためにjQueryを使ったクロスブラウザでの結果は非常に複雑でした(IEは特に悪いです)。

これを回避するには、ビデオタグをハードコードしてから属性を調整し、ソースの追加に.append()を使用します。

ベスト、

ザック

開発者、LongTailビデオ


回答№2については2

私はこの質問が数ヶ月前であることを知っていますが、私は同じ問題を抱えていて解決策を見つけました。

私のページのhtmlには、次のdivがあります。

<div id="Video"></div>

このdivはフラッシュのプレースホルダーとして機能しますflvビデオおよびIE&Firefoxに使用されるプレーヤー。ビデオがMP4でブラウザが.H264ビデオをサポートしている場合は、JavaScriptを使用してdivをHTML5ビデオタグに置き換えます。

最初に私はsrc属性をビデオタグ。これはあなたが経験した問題を引き起こしました:ビデオは時々二度再生しました、オーディオは二倍になりました。最初に挿入し、その後srcを設定すると問題が解決するようです。

    if (canPlayH264() && isMP4) { //HTML5

$("#Video").replaceWith("<video id="HTML5Video" controls />");
$("#HTML5Video")[0].src = "thefile.mp4";
$("#HTML5Video")[0].play();