自定义 HTML 视频控件

Question

有什么方法可以隐藏视频播放器上的“更多选项”按钮（例如允许下载视频）。

我想只保留播放/暂停按钮，这样我就可以像这样隐藏其他按钮：

video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
  display: none;
}

但是我找不到“更多选项”按钮的属性（如果不清楚的话，就是那个有3个点的）。

感谢您的帮助！

Answer 1

据我所知，没有一种标准方法可以单独使用 CSS 直接隐藏或自定义此按钮。如果您确实需要隐藏下载按钮，请将此选项添加到您的

<video>

标签设置中：

controlsList="nodownload"

您可以尝试类似以下代码（运行预览）：

<video width="320" height="200" controls controlsList="nodownload" >
<source src="https://www.w3schools.com/css/mov_bbb.mp4" type="video/mp4">
</video>

也许这个选项足以解决您的问题？

其他解决方案包括：

• 使用 HTML、CSS 和 JavaScript 创建自定义视频播放器，让您可以完全控制播放器的外观和行为。

• 使用现有的播放器库（例如：流行的videoJS）可以提供更多自定义选项。调查从谷歌搜索开始。