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

 找回密码
 立即注册
搜索
查看: 134|回复: 17

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

[复制链接]

2

主题

96

回帖

235

积分

中级会员

积分
235
发表于 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

主题

101

回帖

203

积分

中级会员

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

1

主题

85

回帖

192

积分

注册会员

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

0

主题

97

回帖

195

积分

注册会员

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

0

主题

67

回帖

135

积分

注册会员

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

0

主题

95

回帖

191

积分

注册会员

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

2

主题

93

回帖

231

积分

中级会员

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

1

主题

115

回帖

249

积分

等待验证会员

积分
249
发表于 2024-11-12 23:39:23 | 显示全部楼层
说得太好了,完全同意!

0

主题

115

回帖

228

积分

中级会员

积分
228
发表于 2024-11-14 13:56:15 | 显示全部楼层
我们一起努力,共同解决问题吧。

1

主题

102

回帖

225

积分

中级会员

积分
225
发表于 2024-11-22 00:31:50 | 显示全部楼层
已测试,非常不错
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2025-4-4 12:47 , Processed in 1.030810 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

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