jquery - 我们可以更改浏览器的原生视频播放器的 css 吗？如果不是，那么最轻的 html5 视频播放器插件是什么？

Question

是否可以只使用音频控制并从 html5 视频控制栏中隐藏其他人？

我想隐藏控制栏，只使用音频关闭/打开按钮。我阅读了有关 w3schools 的相关文章，但找不到解决方案。

是否可以更改css位置音频静音按钮？我在这张照片上做了标记。

这是 jsFiddle 示例。

编辑：我们是否有机会更改视频控件的 css 并根据我们的需要重新设置它们的样式？

如果没有，我们可以设计的最好的轻量级 html5 视频播放器是什么？

Answer 1

如果您使用浏览器的本机控件，则不会。无法修改本机控件，即使有，浏览器之间的控件也是不同的。

您可以构建自己的音量控制来覆盖视频并关闭本机控制。

或者您可以使用HTML5 视频播放器（视频的 javascript 库）并为其修改 CSS。

Answer 2

html5 视频标签的控制栏有一些 css 选项。

例如，如果您想隐藏静音按钮，您可以使用：

video::-webkit-media-controls-mute-button {
  display: none;
}

以下是我知道的所有 CSS 选项：

video::-webkit-media-controls-panel {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider-container {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}
video::-webkit-media-controls-timeline-container {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-seek-back-button {}
video::-webkit-media-controls-seek-forward-button {}
video::-webkit-media-controls-fullscreen-button {}
video::-webkit-media-controls-picture-in-picture-button {}
video::-webkit-media-controls-rewind-button {}
video::-webkit-media-controls-return-to-realtime-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-full-page-media::-webkit-media-controls-panel {}

Answer 3

您可以通过处理 Shadow DOM 来对本机控件进行样式设置，使用浏览器供应商特定的伪元素选择器video::-webkit-media-controls-panel（例如 请记住：html[5] 视频不仅仅是video标签；它带有一个不错的 (JavaScript) API。