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

 找回密码
 立即注册
搜索
查看: 114|回复: 10

HTML5中video标签禁止右键和下载视频的问题解决

[复制链接]

3

主题

57

回帖

178

积分

注册会员

积分
178
发表于 2024-4-20 08:10:30 | 显示全部楼层 |阅读模式
近期做了一个关于在线文件管理的项目,类似网盘,基本功能包含用户、消息、项目、分享、文件提取、收藏、回收站等主要功能,领挖还有一些office、压缩包、图片、文本、音频和视频的预览功能。

音频我使用的是APlayer,视频使用的是DPlayer,为了做个兼容,视频还有html5中的video标签类型的预览,由于原生的video标签添加了controls属性后,右下角的 …点击后 会出现‘下载’ ,‘播放速度’,‘画中画’ 的功能选项,但是由于有只读权限的问题,需要关闭掉‘下载功能,摸索了半天解决了
增加 controlsList=“nodownload” 属性
  1. <video controlsList="nodownload" >
复制代码
也可以详细指定
  1. <video
  2.    ref="video"
  3.    controls
  4.    :poster="videoInfo.poster"
  5.    controlslist="nofullscreen nodownload noremoteplayback"
  6.   >
  7. <source :src="videoSrc" type="video/mp4" />
复制代码
当然页面中也可以右键‘另存为’ 也需要做处理,使用oncontextmenu事件,禁用鼠标右键的菜单
oncontextmenu事件禁用右键菜单
  1. document.oncontextmenu = function(){
  2.     event.returnValue = false;
  3. }// 或者直接返回整个事件
  4. document.oncontextmenu = function(){
  5.     return false;
  6. }
复制代码
拓展一下另外两种鼠标事件
onselectstart事件,禁止利用右键在网页上选取内容;
oncopy事件,禁止利用右键进行复制。
都可以捕捉到事件进行处理,如果你想单纯的禁用掉,那可以直接在body或者div中 return false掉操作即可:
  1. <body oncontextmenu = "return false" ></body>
  2. <body onselectstart = "return false" ></body>
  3. <body oncopy = "return false" ></body>
复制代码
此外,针对需要还可以对video标签的其他按钮进行隐藏
  1.   // 隐藏video标签 音量按钮
  2.   video::-webkit-media-controls-mute-button {
  3.     display: none !important;
  4.   }
  5.   // 隐藏video标签 当前按钮
  6.   video::-webkit-media-controls-current-time-display {
  7.     display: none !important;
  8.   }
  9.   // 隐藏video标签 总时间
  10.   video::-webkit-media-controls-time-remaining-display {
  11.     display: none !important;
  12.   }
  13.   // 隐藏video标签 fullscreen按钮
  14.   video::-webkit-media-controls-fullscreen-button {
  15.     display: none !important;
  16.   }
复制代码
到此这篇关于HTML5中video标签禁止右键和下载视频的问题解决的文章就介绍到这了,更多相关HTML5 video禁止右键内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

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

本帖子中包含更多资源

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

×

2

主题

72

回帖

176

积分

注册会员

积分
176
发表于 2024-4-21 12:03:07 | 显示全部楼层
我不太确定,可能需要再确认一下。

0

主题

70

回帖

140

积分

注册会员

积分
140
发表于 2024-5-5 01:37:43 | 显示全部楼层
6666666666
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:13
  • 最近打卡:2024-05-10 17:33:31

2

主题

64

回帖

187

积分

注册会员

积分
187
发表于 2024-6-5 09:21:42 | 显示全部楼层
这个话题真是有趣,我也对它感兴趣。

0

主题

47

回帖

92

积分

注册会员

积分
92
发表于 2024-6-15 01:16:34 | 显示全部楼层
你的信息来源是?我想了解更多。
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:30
  • 最近打卡:2024-04-26 21:46:17

2

主题

73

回帖

221

积分

中级会员

积分
221
发表于 2024-6-24 18:43:37 | 显示全部楼层
已测试,非常不错
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:4
  • 最近打卡:2024-05-25 21:32:16

1

主题

50

回帖

125

积分

注册会员

积分
125
发表于 2024-6-25 21:14:44 | 显示全部楼层
看了LZ的帖子,我只想说一句很好很强大!

0

主题

15

回帖

31

积分

新手上路

积分
31
发表于 2024-9-24 05:17:14 | 显示全部楼层
保持尊重和礼貌对待其他成员是必要的。

1

主题

51

回帖

125

积分

注册会员

积分
125
发表于 2024-10-10 13:04:17 | 显示全部楼层
非常感谢你的观点,让我受益良多!

3

主题

53

回帖

173

积分

注册会员

积分
173
发表于 7 天前 | 显示全部楼层
666666666666
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-24 11:30 , Processed in 0.117993 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

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