是否可以更改默认的html5视频皮肤/颜色

Question

是否可以更改默认的html5视频播放器的颜色或完整的皮肤？

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

Answer 1

无法重新设置浏览器本机HTML5视频控件的外观。但是，您可以完全省略它们（通过删除controls属性），并使用HTML，CSS和HTML视频API（好的参考here）实现您自己的控件。

有一个guide here可以帮助您入门。

Answer 2

是的，如果您的浏览器支持shadow DOM。 在这种情况下，您将有选择器可用于在css上主题：

*::-webkit-media-controls-panel {
   background-color: red !important;
}

还有很多其他伪属性。 要使用它，您可以通过启用＆＃34;显示用户代理阴影DOM＆＃34;来检查crome上的阴影DOM。 on：

开发者工具 - ＆gt;设置 - ＆gt;偏好 - ＆gt;显示用户代理影子DOM

Answer 3

html是浏览器的语言。如果你想改变html5的皮肤默认值，你必须创建你的浏览器。

此解决方案是，您必须从html + css + js / swf手动创建视频播放器 我认为改变是不可能的，除非你使用我的指示。

Answer 4

事实是，媒体控件样式仅在影子dom的深层可用。这里有一个列表：https://gist.github.com/afabbro/3759334

还要查看主线程和注释。他们或多或少地使这些保持最新。我的意思是，也许它将对您有很好的用处，也许不是，但是很高兴知道这种样式在某种程度上得到了支持。

请注意，您可能会在浏览器上检查阴影DOM来查看添加到阴影元素中的类，但是您只能编辑以“ -webkit”为前缀的类