Firefoxのデフォルトに干渉だ機能を修正するためにどのようにHTML5ビデオプレーヤー

Question

なぜ

onclick="this.play();"

は、FirefoxのHTML5のデフォルトのビデオコントロールに干渉し、どのようにそれを修正するのですか？

私はこの機能をonclickで再生し、firefox以外のブラウザでも動作するポスターを与えました。 FirefoxのデフォルトHTML5ビデオコントロールが機能しなくなりました。再生を押すと、再生は行われず、再生ボタンが再び表示されますが、ビデオは再生されません。しかし、ビデオを特定の部分にスキップすると、最終的にはロードされ、再生されます。

ここでは、コードです：

<video id="bigvid3" poster="https://cdn.shopify.com/s/files/1/0641/4457/files/Very_Clean.jpg? 
 
5718060450832183858" onclick="this.play();" preload="none" controls="controls" width="100%"> 
 
<source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.mp4" type="video/mp4"> 
 
</video>

Answer 1

。

document.getElementById('myVideo').addEventListener('click', function (event) { 
 
    event.preventDefault(); // Prevent the default behaviour in FireFox 
 

 
    // Then toggle the video ourselves 
 
    if (this.paused) { 
 
     this.play(); 
 
    } 
 
    else { 
 
     this.pause(); 
 
    } 
 
});

この場合、あなたの動画ID "bigvid3" とmyVideoを交換してください。あなたが探している機能を得るでしょう。

詳しくはthis linkを参照してください。この質問にも答えます。

Answer 2

だけのFirefoxであなたのスニペットを実行しようとした意図したとおり、それは実際に動作していませんが。これがFirefoxでのみ問題であれば、私は回避策を提案することができます。

onclick="if(!$.browser.mozilla){this.play();}" 

このコードは、ブラウザがFirefoxであるかどうかを確認するためのものです。これにより、デフォルトのクリック処理に頼ることができます。あなたは、Firefoxのデフォルトのコントロールを無効にする必要が

see the sample on codepen