我们可以更改浏览器的原生视频播放器的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

您可以通过使用浏览器供应商特定的伪元素选择器（如video::-webkit-media-controls-panel, 但是\xe2\x80\x94like @heff said\xe2\x80\x94）来对本机控件进行一定程度的样式设置，这些控件在浏览器之间有所不同，并构建您自己的产品更多控制。请记住：html[5] 视频不仅仅是标签video；它还包括标签。它带有一个很好的（JavaScript）API。

\n