HTML 和 CSS 视频样式

HTML & CSS Video Style

本文关键字：样式 视频 CSS HTML      更新时间：2023-09-26

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

videojs自定义HTML5视频播放器。

视频.js非常容易设置。可能需要几秒钟的时间 让播放器启动并在您的网页上工作。

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

video {
   border: 5px groove darkblue;
   padding: 30px;
   width: auto;
   height: auto;
}

我尝试稍微玩一下控件的样式，但没有得到任何结果。

[controls] {
    background: red;
    color: red;
}
::controls, ::-controls, ::-webkit-controls {
    background: red;
    color: red;
}

（是的，我知道我尝试过的很愚蠢，但至少我尝试过！

如果你同意使用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视频播放器。

相关文章：