分享好友 教程首页 教程搜索 频道列表

CSS_控制 video 标签的控制栏组件(隐藏、显示进度条、播放按钮、全屏按钮等)

2022-01-11 18:316390
+关注30
核心提示:效果看代码

// 当 video 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

<video controls></video>

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


本文标签: #视频
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

html5 video微信浏览器视频不能自动播放

    用代码自行测试

网络转载 JavaScript教程2023-02-27

h5版视频播放和暂停

    用代码测试

小黑 H5教程2022-04-26

移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

    script type="text/javascript"var go;//记录video播放器位置var video=document.querySelectorAll('video')//获取页面中所有videofor(var i=0;ivideo.length;i++) {(function (v) {video[v].addEventListener('play',function(e){if(go){if(go!=this){go.pa

网络 web前端开发2020-05-22

下一篇
我来说两句
抢沙发