百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML页面原生VIDEO标签隐蔽下载按钮功能
分享文章到:

HTML页面原生VIDEO标签隐蔽下载按钮功能

发布时间:09/01 来源:未知 浏览: 关键词:
这篇文章主要介绍了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标签潜藏下载按钮功效的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板