设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 85|回复: 8

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

[复制链接]

2

主题

40

回帖

123

积分

注册会员

积分
123
发表于 2024-4-20 10:28:41 | 显示全部楼层 |阅读模式
在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题。
虽然简介视频是非付费的,但也不希望会有下载按钮或者可以视频另存为,所以找到一个可以看上去没有下载功能的方法,做一下笔记。

想要隐藏以上下载按钮,三个样式就可以了,不废话直接贴代码:
  1. video::-internal-media-controls-download-button {
  2.     display:none;
  3. }
  4. video::-webkit-media-controls-enclosure {
  5.     overflow:hidden;
  6. }
  7. video::-webkit-media-controls-panel {
  8.     width: calc(100% + 50px);
  9. }
复制代码
说白了就是把下载按钮移动到视窗外面,但是这些CSS找了好久啊!!

这种方法并不能真正阻止视频的下载,“有心”的用户还是可以在缓存文件里找到加载过的视频文件的,所以就像标题写的一样,只是隐藏。
真正的阻止视频的下载还是需要通过服务器端对视频地址进行加密验证。
总结
以上所述是小编给大家介绍的HTML页面原生VIDEO标签隐藏下载按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

47

回帖

95

积分

注册会员

积分
95
发表于 2024-4-20 22:40:52 | 显示全部楼层
我不太确定,可能需要再确认一下。

1

主题

54

回帖

132

积分

注册会员

积分
132
发表于 2024-4-29 14:43:30 | 显示全部楼层
谢谢你分享这个信息

0

主题

47

回帖

95

积分

注册会员

积分
95
发表于 2024-5-2 19:19:04 | 显示全部楼层
666666666666666666

0

主题

41

回帖

83

积分

注册会员

积分
83
发表于 2024-6-1 22:49:59 | 显示全部楼层
我想了解更多

0

主题

55

回帖

111

积分

注册会员

积分
111
发表于 2024-6-15 03:06:00 | 显示全部楼层
666666666666

2

主题

53

回帖

151

积分

注册会员

积分
151
发表于 2024-10-10 10:42:24 | 显示全部楼层
能给个链接吗?我想深入了解一下。

1

主题

59

回帖

141

积分

等待验证会员

积分
141
发表于 3 天前 | 显示全部楼层
说得太好了,完全同意!

0

主题

64

回帖

128

积分

注册会员

积分
128
发表于 昨天 13:56 | 显示全部楼层
我们一起努力,共同解决问题吧。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:14 , Processed in 0.081550 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表