微信公众号制作开发 微信小程序定制开发 网站建设制作 手机app软件开发

您的位置:首页 > 技术观点 > 信息详情

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

来源:山东鸿软信息科技有限公司  阅读量:  时间:2018-05-10 11:05
这篇文章主要介绍了HTML页面原生VIDEO标签隐藏下载按钮功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧

在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题。

虽然简介视频是非付费的,但也不希望会有下载按钮或者可以视频另存为,所以找到一个可以看上去没有下载功能的方法,做一下笔记。

想要隐藏以上下载按钮,三个样式就可以了,不废话直接贴代码:

?

1
2
3
4
5
6
7
8
9
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找了好久啊!!

这种方法并不能真正阻止视频的下载,“有心”的用户还是可以在缓存文件里找到加载过的视频文件的,所以就像标题写的一样,只是隐藏。

真正的阻止视频的下载还是需要通过服务器端对视频地址进行加密验证。

总结

以上所述是小编给大家介绍的HTML页面原生VIDEO标签隐藏下载按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言。


成为您更加专业的技术合伙人

网站建设 | APP开发 | 产品服务 | 技术观点 | 关于我们      电话:151-6502-2080  客服QQ:1828087588、1421667633  客服电子邮箱:1828087588@qq.com

Copyright © 2019 山东鸿软信息科技有限公司 版权所有 https://www.greatsoft.cn 鲁ICP备16026454号