隐藏在 Chrome 和 Safari 中但不在 Firefox 中的 HTML5 视频控件

Question

我在使用 HTML 5 视频控件时遇到问题，可以在以下位置查看:

http://www.filmsbyben.com/projects/beannchor/

在 Chrome 和 Safari 中，它可以正确显示，没有播放器控件和允许播放视频的大播放按钮。无论何时在 Firefox 中查看视频控件都会显示。

我将以下代码添加到 CSS 中，这些代码是控件不显示所必需的，但不适用于 Firefox:

video::-webkit-media-controls-panel {
  display: none;
  -webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
  display: none;
  -webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
  display: none;
  -webkit-appearance: none
}

video::-webkit-media-controls {
  display: none;
  -webkit-appearance: none;
}

我还添加了 controls="false" 到 video 标签，但与 Firefox 没有关系。

如有任何帮助，我们将不胜感激。

Answer 1

像这样删除视频标签的 controls 属性:

<video onended="videoEnded(this)" poster="http://www.filmsbyben.com/wp-content/uploads/2016/05/Beannchor-1.jpg" class="full-video video-button-fade" id="video-button-fade">
     <source onended="videoEnded(this)" type="video/mp4" poster="http://www.filmsbyben.com/wp-content/uploads/2016/05/Beannchor-1.jpg" src="https://player.vimeo.com/external/133027081.hd.mp4?s=6e831cbf174dc8d972293b3275a3b34711904df8&amp;profile_id=113"></source>
            Your browser does not support the video tag.
</video>