video的使用,及修改播放按钮进度条的显示与隐藏

配置及属性

小demo 该配置去除了播放进度条去除了画中画播放进度下载功能
具体配置可参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#attr-disablepictureinpicture

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 进度条 */video::-webkit-media-controls-timeline {display: none;}video::-webkit-media-controls-toggle-closed-captions-button {display: none;}</style></head><body><!-- autoplay: 设置视频时候自动播放controls: 添加该属性之后 页面才显示控制按钮controlslist: 当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些控件。允许接受的值有 nodownload, nofullscreen 和 noremoteplayback。如果要禁用画中画模式（和控件），请使用 disablePictureInPicture 属性。--><div style="width: 600px; height: 400px; margin: 30px"><videocontrolssrc="./demo.mp4"controlslist="nodownload noremoteplayback noplaybackrate "disablepictureinpicturestyle="width: 100%; height: 100%"></video></div></body>
</html>

通过css控制播放按钮的显示与隐藏

//全屏按钮
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;
}

其他修改方式 https://blog.csdn.net/c_qianxia5040/article/details/107226670

video的使用,及修改播放按钮进度条的显示与隐藏相关推荐

自定义圆形播放按钮进度条
前言由于我最近在公司开发的项目做一个音乐播放器,类似于咪咕音乐,qq音乐,网易云音乐.刚开始的需求还只是做一些简单的播放音乐功能,播放按钮也是直接拿UI给的图标,还不需要搞什么在按钮上显示进度之类的 ...
html video 修改封面,html5自定义video标签的海报与播放按钮功能
一.问题 1.默认播放按键不好看 2.设置自定义封面图以上这两点都想自定义二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮三.步骤分解 1.海报图片作为div ...
html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...
一.问题 1.默认播放按键不好看 2.设置自定义封面图以上这两点都想自定义二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮三.步骤分解 1.海报图片作为div ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
多条语音消息合成一整条连续播放与进度条功能技术点！
多条语音汇成一整条开发最近在做一个多条语音合成一整条语音并且结合进度条可以快进或者后退功能,功能不复杂,但是所遇到的坑不少,所以我就想着把我遇到的坑写下来,希望以后有用到的小伙伴们可以少走点弯路: ...
计算机休眠不播放音乐,电脑没有声音了播放音乐进度条还不会动是怎么回事求...
电脑没有声音了播放音乐进度条还不会动是怎么回事求以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 电脑没有声音了播放音乐进 ...
iOS利用UIView自定义播放器进度条
前段时间做项目遇到播放器自定义进度条的需求,刚开始想的是继承自系统的UISlider去做,内部重写系统方法完成样式定制.后来遇到头疼的问题,在iphone6.7手机上样式显示正常,遇到plus手机进度 ...
android加载百分比功能,android进度条怎么显示百分比
android布局文件里的ProgressBar长形进度条怎么自在windows操作系统下Android studio按照如下步骤自动义ProgressBar长形进度条的样式. 首先创建一个andr ...
html打印进度条不显示,LODOP打印URL显示和隐藏进度条
不建议使用ADD_PRINT_URL: 由于Lodop借用IE下载引擎,与非IE浏览器之间目前不能传递Session(Cookies),所以需要安全验证的页面不要用URL方式打印,要用页面已经下载好的 ...

video的使用,及修改播放按钮进度条的显示与隐藏

配置及属性

通过css控制播放按钮的显示与隐藏

video的使用,及修改播放按钮进度条的显示与隐藏相关推荐

最新文章

热门文章