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

Posted 2023-02-22

【中文标题】我们可以更改浏览器的原生视频播放器的 css 吗？如果不是，那么最轻的 html5 视频播放器插件是啥？

【英文标题】：Can we change browser's native video player's css ? if not what is the lightest html5 video player plugin which can be stylise easy?我们可以更改浏览器的原生视频播放器的 css 吗？如果不是，那么最轻的 html5 视频播放器插件是什么？

【发布时间】：2012-08-07 03:43:57

【问题描述】：

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

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

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

Here is jsFiddle sample.

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

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

【参考方案1】：

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 

【参考方案2】：

您可以通过处理 Shadow DOM 来对原生控件进行一定程度的样式设置，使用浏览器供应商特定的伪元素选择器，例如 video::-webkit-media-controls-panel，但是就像 @heff 所说的那样，这些控件在浏览器之间有所不同，并且构建您自己的控件可以提供更多控制.请记住：html[5] 视频不仅仅是video 标签；它带有一个不错的 (javascript) API。

【讨论】：

您能否扩展您关于更改本机控件的伪选择器的答案，并提供更具体的示例？

不改变伪选择器，而是使用 CSS 伪元素选择器（参见Selectors Level 3）来定位Shadow DOM 元素的视觉外观。 Discover the Dark side with Shadow DOM 可能适合您的案例。

至少我们对-webkit-浏览器仍有希望，这是我第一次听说Shadow DOM。感谢您的回答，+100 是您的。

其他 Web 浏览器也维护影子 DOM，但它们的标签和可访问性级别差异很大。祝您的项目好运，感谢您的赏金！

我注意到我的旧文章的链接仍然相关，但文章本身已经消失了。所以我已经更新和升级了它，它现在就在这里blog.romanliutikov.com/post/62104274790/web-components我会在弄清楚如何在 Tumblr 上完成旧链接时修复它。

【参考方案3】：

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

你可以build your own volume control覆盖视频并关闭原生控件。

或者您可以使用HTML5 video player（一个用于视频的 javascript 库）并为其修改 CSS。

【讨论】：

查看html5rocks.com/en/tutorials/video/basics/#toc-fun-js 了解一些想法。