隐藏video标签中各种控件

最新推荐文章于 2024-08-15 17:55:44 发布

_处女座程序员的日常

最新推荐文章于 2024-08-15 17:55:44 发布

阅读量5.7k

点赞数 5

分类专栏：前端 html 文章标签：前端个人开发

本文链接：https://blog.csdn.net/qq_42931285/article/details/124186441

版权

前端同时被 2 个专栏收录

372 篇文章 13 订阅

订阅专栏

html

46 篇文章 1 订阅

订阅专栏

如果video标签添加上controls会出现视频控件，如播放按钮、进度条、全屏等。

// html
<video controls class="video"/>

原理：是通过为类元素选择器来实现的。如何查看伪元素，可查看我的上一篇文章。

// css
/* 隐藏video 全屏按钮 */
.video::-webkit-media-controls-fullscreen-button {
		display: none;
}
/* 隐藏video 播放按钮 */
.video::-webkit-media-controls-play-button {
		display: none;
}
/* 隐藏video 进度条 */
.video::-webkit-media-controls-timeline {
		display: none;
}
/* 隐藏video 观看的当前时间 */
.video::-webkit-media-controls-current-time-display{
		display: none;            
}
/* 隐藏video 剩余时间 */
.video::-webkit-media-controls-time-remaining-display {
		display: none;            
}
/* 隐藏video 音量按钮 */
.video::-webkit-media-controls-mute-button {
		display: none;            
}
.video::-webkit-media-controls-toggle-closed-captions-button {
		display: none;            
}
/* 隐藏video 音量的控制条 */
.video::-webkit-media-controls-volume-slider {
		display: none;            
}
/* 隐藏video 所有控件 */
.video::-webkit-media-controls-enclosure{ 
		display: none;
}