如何在Firefox中删除以下HTML5视频元素控件？

Question

我在Firefox中遇到了一个问题，特别是我的元素在播放之前在海报属性图像上有一个亮灰色的播放按钮覆盖：

在Chrome和IE中与玩家一样出现：

我的HTML是基本的：

＆＃13;

＆＃13;

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*/

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我可以在两年前（How to remove the gray overlay on top of the Video in firefox using the new HTML5 <video>?）的另一个帖子中询问过这个问题，但我找不到任何解决方案。我愿意在解决方案中使用javascript，但我不想完全重新设计控件。

Answer 1

这是Firefox的默认控件UI。我们仍然无法在此浏览器中自行修改它，因此您可以选择两个选项：

• 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>