隐藏video的css方法

最新推荐文章于 2024-06-24 17:26:32 发布

原创最新推荐文章于 2024-06-24 17:26:32 发布 · 817 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

vue 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了如何通过CSS控制HTML5 video标签的controls属性，展示如何隐藏音量按钮、当前时间、总时间和全屏按钮，以实现对视频播放控件的定制化显示。

video标签的controls属性添加时，会出现时间轴，播放时间，总时间，音量调节，全屏等控件元素。有时候只想保留其中一种或几种，对应的css如下

// 隐藏video 音量按钮
video::-webkit-media-controls-mute-button {display: none !important;
}// 隐藏video 当前按钮
video::-webkit-media-controls-current-time-display {display: none !important;
}// 隐藏video 总时间
video::-webkit-media-controls-time-remaining-display {display: none !important;
}// 隐藏video 全屏按钮
video::-webkit-media-controls-fullscreen-button {display: none !important;
}