26

HTML5ビデオを管理するためのjQueryプラグインを構築しています。canplayイベントとcanplaythroughイベントをキャプチャしようとしています。Chromeでは、イベントは問題なく発生します。Firefoxでは、トリガーされる場合とトリガーされない場合があります。

ここでコードを少し簡略化しています。

$('#my_video').on('canplay canplaythrough', function(){
    console.log('canplay event fired');
});

ネイティブのjavascript.addEventListener（）も試してみましたが、機能しません。

Firefoxでイベントが呼び出されない理由と、それを修正する方法はありますか？

注：jplayerやvideo-jsなどのすでに利用可能なプラグインの1つを使用するように言わないでください。それらが存在し、正常に機能することはわかっていますが、社内ソリューションを構築する必要があります。

4

8 に答える 8

11

これが表示される最も可能性の高い理由は、おそらくタイミングの問題に関係しています。受け入れられた回答で、jQueryをフッターではなくヘッドに配置すると問題が解決すると述べました。これは、DOM の解析とスクリプトの実行順序に問題があることを示しています。最も可能性の高い原因は、jquery とページ スクリプトが解析され、イベント ハンドラーが追加される前に "canplay" および "canplaythrough" イベントが発生していたことです。スクリプトをヘッドに配置することで、DOM 要素が作成される前にイベント バインディングが強制的に発生するようになり、イベントを見逃すことがなくなりました。

余談ですが、スクリプト要素をページの下部に配置することによるパフォーマンス上の利点については、議論の余地があります。ページのパフォーマンスを本当に微調整したい場合は、LABjs などを使用して並列スクリプトの読み込みを管理します。

于 2012-11-12T23:45:10.810 に答える
4

私の質問がまったく注目されなかったとしても、将来これに出くわす可能性のある人々のために説明することは良い考えだと思います...

問題は非常に奇妙です: jQuery コアがフッターに含まれている場合、一部のビデオ イベントが機能しません。jQuery コアがドキュメントの head に含まれている場合、すべてのイベントが正しく呼び出されます。

そのため、最適化の「ベスト プラクティス」では読み込み時間を短縮するためにすべてのスクリプトを本文の最後に配置することが推奨されている場合でも、解決策は html ヘッドに jQuery コアを含めることです。

于 2012-04-24T19:41:35.890 に答える
3

トリガー後に Firefox がオーディオ全体をロードすることを期待している場合、loadこれは行われません。起動しloadstartますが、何もダウンロードしません。progressイベントは発生しません。そして、実際にはそのファイルへの要求はありません。この動作は Firebug で確認できます。

Firefox は、'play' をトリガーした後にのみファイルの読み込みを開始します。

証明。コンソール出力を参照してください。

于 2014-10-17T18:06:09.930 に答える
1

追加:

var video = $('video');
video.trigger('load');

canplaythroughイベント リスナーを追加すると、Firefox と Safari で修正されました。

于 2015-01-07T19:07:55.513 に答える