javascript HTML 和 CSS 视频样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27203863/
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
HTML & CSS Video Style
提问by Brendan Oggeri
I was wondering how to style the buttons and the whole element of an HTML Video with CSS. I would like to know the steps that need to be taken to complete these actions.
我想知道如何使用 CSS 为 HTML 视频的按钮和整个元素设置样式。我想知道完成这些操作需要采取哪些步骤。
<video class="video" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
回答by Mohamad Shiralizadeh
回答by Brendan Oggeri
try setting an id .For example:
尝试设置一个 id 。例如：
<video class="video" id="video-style" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
CSS:
#video-style{
border:2px solid blue;
padding:5px;
/**Or add your own style**/
}
回答by Aamir Shahzad
you can style it using element selector;
您可以使用元素选择器对其进行样式设置；
video {
border: 5px solid red;
/*Your CSS here for styling*/
}
For advance styling & skinning styling look in to videojs.
对于高级样式和蒙皮样式，请查看videojs。
Also a good read Build a custom HTML5 video player.
也很好读构建自定义 HTML5 视频播放器。
回答by Veo
I do not think you may style the buttons and the controls of the video tag, but you can at least apply some styles for the whole video itself, such as:
我不认为您可以设置视频标签的按钮和控件的样式，但您至少可以为整个视频本身应用一些样式，例如：
video {
border: 5px groove darkblue;
padding: 30px;
width: auto;
height: auto;
}
I tried to play with the controls' styles a bit, but got no results.
我尝试使用控件的样式，但没有结果。
[controls] {
background: red;
color: red;
}
::controls, ::-controls, ::-webkit-controls {
background: red;
color: red;
}
(Yes, I know what I tried was dumb, but at least I tried!)
（是的，我知道我的尝试很愚蠢，但至少我尝试过！）
If you are okay with using JavaScript to do that, you might want to look at VIDEO.JSor at this articlefrom MrBool where everything is done manually.
如果您可以使用 JavaScript 来做到这一点，您可能想查看VIDEO.JS或来自 MrBool 的这篇文章，其中所有内容都是手动完成的。
