我想知道如何使用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>
我想知道如何使用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>
我认为您可能无法为视频标签的按钮和控件设置样式,但是您至少可以为整个视频应用一些样式,例如:
video {
border: 5px groove darkblue;
padding: 30px;
width: auto;
height: auto;
}
我尝试了一下调整控件的样式,但是没有获得任何结果。
[controls] {
background: red;
color: red;
}
::controls, ::-controls, ::-webkit-controls {
background: red;
color: red;
}
< p >如果您想使用JavaScript来实现这一点,您可能需要查看VIDEO.JS或者从MrBool中手动完成的这篇文章。(是的,我知道我尝试的很愚蠢,但至少我尝试了!)
尝试设置一个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**/
}
video {
border: 5px solid red;
/*Your CSS here for styling*/
}
如果想要进行高级样式和皮肤设定,请参考 videojs。
同时,也推荐阅读构建自定义HTML5视频播放器。