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

【问题标题】：is it possible to change default html5 video skin/color是否可以更改默认的 html5 视频皮肤/颜色
【发布时间】：2013-12-09 10:12:55
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

事情是媒体控制样式只在shadow dom中可用。这里有一个列表：https://gist.github.com/afabbro/3759334

同时查看主线程和 cmets。他们或多或少地使这些保持最新状态。我的意思是，也许它对你有用，也许不会，但很高兴知道这种样式有一定程度的支持。

请注意，您可以在浏览器上检查 shadow DOM 以查看添加到 shadow 元素中的类，但您可以只编辑带有“-webkit”前缀的类

【讨论】：