通过css修改video标签的原生样式

这篇文章距离上次修改已过451天，其中的内容可能已经有所变动。

要通过CSS修改video标签的原生样式，你需要对video元素应用CSS规则。由于video是一个复杂的控件，它在不同的浏览器中展示出的默认样式可能会有所不同。以下是一些常用的CSS规则，以及它们对应的默认值和建议的修改值：




video::-webkit-media-controls-panel {
    width: calc(100% - 10px); /* 修改视频控制面板的宽度 */
    max-width: 100%;
}
 
video::-webkit-media-controls-play-button {
    width: 54px; /* 修改播放按钮的宽度 */
    height: 54px;
    background-image: url('path/to/play-button-image.png'); /* 自定义播放按钮的背景图片 */
}
 
video::-webkit-media-controls-timeline {
    height: 8px; /* 修改进度条的高度 */
    background-color: #f2f2f2; /* 修改进度条的背景颜色 */
}
 
video::-webkit-media-controls-time-remaining-display {
    display: none; /* 隐藏当前时间 */
}
 
video::-webkit-media-controls-mute-button {
    display: none; /* 隐藏静音按钮 */
}
 
video::-webkit-media-controls-fullscreen-button {
    display: none; /* 隐藏全屏按钮 */
}
 
video::-webkit-media-controls-volume-slider {
    display: none; /* 隐藏音量控制 */
}

请注意，这些样式是针对使用Webkit内核的浏览器（如Chrome和Safari）的。对于其他浏览器，比如Firefox，它们有自己的一套伪元素，如::-moz-media-controls。

要应用这些样式，你需要在你的CSS文件或<style>标签中包含这些规则。如果你想要全局应用这些样式，可以直接将它们放在<head>标签内。如果你只想对特定的video元素应用样式，可以为它们添加一个类名，然后只针对该类名设置CSS规则。

例如，如果你想要创建一个.custom-video类来应用自定义的样式：




.custom-video::-webkit-media-controls-panel {
    width: calc(100% - 10px);
    max-width: 100%;
}
 
/* 其他样式规则 */

然后在HTML中，你可以这样使用这个类：




<video class="custom-video" controls>
    <!-- ... -->
</video>

请记住，修改原生控件样式可能会导致在不同浏览器中的控件外观不一致，或者在不同版本的浏览器中表现不一样。因此，在实际项目中，你可能需要对不同浏览器进行兼容性测试，并适当调整样式以确保最佳的用户体验。

通过css修改video标签的原生样式

评论已关闭

推荐阅读