如果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;
}
若想全部隐藏,去掉controls即可。
<video class="video"/>