我们可以更改浏览器的原生视频播放器的CSS吗？如果不是什么是最轻的html5视频播放器插件，它可以很容易风格？

Question

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

我想隐藏控制栏，只需使用音频关闭/开启按钮。我看了revelant article on w3schools但找不到解决方案。

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

Here is jsFiddle sample.

编辑：我们是否有机会改变视频控制的CSS并根据我们的需求重新设计它们？

如果没有，那么什么是最好的和轻巧的html5视频播放器，我们可以设计风格？

Answer 1

如果您使用浏览器的本机控件，则不会。没有修改本机控件的权限，即使有，也可以在浏览器之间进行控制。

您可以build your own volume control覆盖视频并关闭本机控件。

或者您可以使用HTML5 video player（视频的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

您可以使用浏览器供应商特定的伪元素选择器（如video::-webkit-media-controls-panel）来解决Shadow DOM，从而在一定程度上设置本机控件的样式，但是像@heff所说 - 这些控件在浏览器之间有所不同，并且构建自己的优惠更多的控制。请记住：html [5]视频不仅仅是video标记;它带有一个不错的（JavaScript）API。