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

Question

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

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

Answer 1

没有办法重新设置浏览器本机HTML5视频控件.但是,您可以完全省略它们(通过删除controls属性),并使用HTML,CSS和HTML视频API实现您自己的控件(这里有很好的参考).

这里有一个指南,可以帮助您入门.

Answer 2

是的，如果您的浏览器支持 shadow DOM。在这种情况下，您将可以使用选择器将其主题化为 css，例如：

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

以及许多其他伪属性。要使用它，您可以通过启用“显示用户代理 shadow DOM”来检查 crome 上的 shadow DOM：

开发者工具 -> 设置 -> 首选项 -> 显示用户代理 shadow DOM