这篇文章主要介绍了html页面原生video标签隐藏下载按钮功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧
在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题。
虽然简介视频是非付费的,但也不希望会有下载按钮或者可以视频另存为,所以找到一个可以看上去没有下载功能的方法,做一下笔记。

想要隐藏以上下载按钮,三个样式就可以了,不废话直接贴代码:
video::-internal-media-controls-download-button { display:none;}video::-webkit-media-controls-enclosure { overflow:hidden;}video::-webkit-media-controls-panel { width: calc(100% + 50px); }立即学习“前端免费学习笔记(深入)”;
说白了就是把下载按钮移动到视窗外面,但是这些CSS找了好久啊!!

这种方法并不能真正阻止视频的下载,“有心”的用户还是可以在缓存文件里找到加载过的视频文件的,所以就像标题写的一样,只是隐藏。
真正的阻止视频的下载还是需要通过服务器端对视频地址进行加密验证。
相关推荐:
HTML5 video视频字幕的使用和制作方法
HTML5触摸事件实现移动端简易进度条的实现方法
以上就是HTML页面原生VIDEO标签隐藏下载按钮功能的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546060.html
微信扫一扫
支付宝扫一扫