Html 是否可以更改默认的 html5 视频皮肤/颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20467959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is it possible to change default html5 video skin/color
提问by Johnny
Is it possible to change default html5 video player's colors or complete skin?
是否可以更改默认的 html5 视频播放器的颜色或完整的皮肤？
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
回答by net.uk.sweet
There's no way of re-skinning the browsers native HTML5 video controls. However, you can omit them completely (by removing the controls attribute), and implement your own controls using HTML, CSS and the HTML video API (good reference here).
无法为浏览器的原生 HTML5 视频控件重新设计外观。但是，您可以完全省略它们（通过删除控件属性），并使用 HTML、CSS 和 HTML 视频 API 实现您自己的控件（这里有很好的参考）。
There's a guide herewhich will get you started.
这里有一个指南，可以帮助您入门。
回答by Ignacio Vazquez
Yes it is, if your browser supports shadow DOM. On that case you will have selectors available to theme it on css like:
是的，如果您的浏览器支持 shadow DOM。在这种情况下，您将可以使用选择器将其主题化为 css，例如：
*::-webkit-media-controls-panel {
background-color: red !important;
}
And many other pseudo attributes. To play with it, you can examine the shadow DOM on crome by enabling "Show user agent shadow DOM" on :
以及许多其他伪属性。要使用它，您可以通过启用“显示用户代理 shadow DOM”来检查 crome 上的 shadow DOM：
Developer tools -> Settings -> Preferences -> Show user agent shadow DOM
开发者工具 -> 设置 -> 首选项 -> 显示用户代理 shadow DOM
回答by Allan Lima
Thing is that media control styles are only available deep into shadow dom. There is a list here: https://gist.github.com/afabbro/3759334
问题是媒体控制样式只能在 shadow dom 深处使用。这里有一个列表：https: //gist.github.com/afabbro/3759334
Look at the main thread and the comments as well. They are keeping these more or less up to date. I mean, maybe it'll have a good use for you, maybe not, but it's nice to know that there is some level of support to this kind of styling.
看看主线程和评论。他们或多或少地保持这些最新状态。我的意思是，也许它对你有用，也许没有，但很高兴知道对这种样式有一定程度的支持。
Pay attention that you may inspect shadow DOM on your browser to see classes added into the shadow elements, but you can edit just the ones prefixed with "-webkit"
请注意，您可能会在浏览器上检查 shadow DOM 以查看添加到 shadow 元素中的类，但您只能编辑以“-webkit”为前缀的类
