HTML和CSS视频风格

Question

我想知道如何使用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>

- Brendan Oggeri

---

@BrendanOggeri 在这里查看 http://mrbool.com/how-to-style-the-html-5-video-element-with-javascript-and-css/27683 - Akshay

Answer 1

你可以使用videojs来定制HTML5视频播放器。

Video.js非常容易设置。只需要几秒钟即可将播放器放置在您的网页上并开始工作。

- Mohamad Shiralizadeh

Answer 2

我认为您可能无法为视频标签的按钮和控件设置样式，但是您至少可以为整个视频应用一些样式，例如：

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中手动完成的这篇文章。

^{（是的，我知道我尝试的很愚蠢，但至少我尝试了！）}

- Veo

Answer 3

尝试设置一个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**/
}

- user4103823

Answer 4

你可以使用元素选择器来设置样式；

video {
border: 5px solid red;
/*Your CSS here for styling*/
}

如果想要进行高级样式和皮肤设定，请参考 videojs。

同时，也推荐阅读构建自定义HTML5视频播放器。

- Aamir Shahzad