如何在 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>

两年前，我可以在其他 1 个线程 (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 上测试过的 hack：

每当您开始播放视频时，此叠加层就会消失。
通过设置视频的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>