Firefoxで次のHTML5動画要素コントロールを削除するにはどうすればよいですか？

Question

私はポスター属性画像の上に明るいグレーの再生ボタンオーバーレイを持って、演奏される前には、具体的にどこの要素Firefoxで問題が生じています：Chromeとプレイヤーのように表示されますIEでの対

こうした：

私のHTMLは基本的なものです：

main { 
 
    width: 75%; 
 
    height: 700px; 
 
    padding-right: 1.9%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
video { 
 
    margin-left: 9.2%; 
 
    margin-top: 11%; 
 
    border: 4px solid black; 
 
    object-fit: initial; 
 
} 
 

 

 
/*Causes the poster to not leave gaps between itself and the border*/

<video id="video" width="768" height="432" poster="img/main/intro1poster.png" controls> 
 
     <source src="media/videos/intro1.mp4" type="video/mp4"> 
 
     <p>Your browser doesn't support HTML5 video or Flash. 
 
      A low quality version of the video can be found here: <br/> 
 
      <a href="https://www.youtube.com/watch?v=BDw7xpzH-68">Dev Update #1</a></p> 
 
</video>

この質問は2年前、私は見つけることができます（How to remove the gray overlay on top of the Video in firefox using the new HTML5 <video>?）1つの他のスレッドに頼まれましたが、何の解決策は、これまでに提示しませんでした。私はソリューションでjavascriptを使用したいと思っていますが、私はコントロールを完全に再設計したくありません。

Answer 1

これはFirefoxのデフォルトのコントロールUIです。我々はまだこのブラウザでそれを自分自身を修正する方法を持っていないので、次の2つのオプションに関連付けられています：

• Create your own controls UI。
  これにより、すべてのブラウザで一貫したカスタマイズ可能なUIを使用できます。ここで

• 将来的に壊れるかもしれないいくつかのハックの使用（あるいは過去に）

は私だけFF 54でテストされそのようなハックです：

あなたが起動するたびにこのオーバーレイが消えましたビデオを再生する。
ビデオのautoplay属性を設定することで、それを取り除くことができます。しかし、ビデオの実際の再生を避けるために、可能な限り速やかにpause()メソッドを呼び出す必要があります。

// pause it as soon as possible 
 
document.getElementById('video').pause();

video { 
 
    margin-left: 9.2%; 
 
    margin-top: 11%; 
 
    border: 4px solid black; 
 
    object-fit: initial; 
 
}

<video id="video" width="768" height="432" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/800px-John_William_Waterhouse_A_Mermaid.jpg" controls autoplay> 
 
    <!-- simply added 'autoplay' attribute --> 
 
    <source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4" type="video/mp4"> 
 
</video>