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

Alien丶神 · 发表于 2024-4-20 08:10:30

近期做了一个关于在线文件管理的项目，类似网盘，基本功能包含用户、消息、项目、分享、文件提取、收藏、回收站等主要功能，领挖还有一些office、压缩包、图片、文本、音频和视频的预览功能。

音频我使用的是APlayer，视频使用的是DPlayer，为了做个兼容，视频还有html5中的video标签类型的预览，由于原生的video标签添加了controls属性后，右下角的 …点击后会出现‘下载’ ，‘播放速度’，‘画中画’ 的功能选项，但是由于有只读权限的问题，需要关闭掉‘下载功能，摸索了半天解决了
增加 controlsList=“nodownload” 属性

<video controlsList="nodownload" >

复制代码

也可以详细指定

<video
ref="video"
controls
:poster="videoInfo.poster"
controlslist="nofullscreen nodownload noremoteplayback"
>
<source :src="videoSrc" type="video/mp4" />

复制代码

当然页面中也可以右键‘另存为’ 也需要做处理，使用oncontextmenu事件，禁用鼠标右键的菜单
oncontextmenu事件禁用右键菜单

document.oncontextmenu = function(){
event.returnValue = false;
}// 或者直接返回整个事件
document.oncontextmenu = function(){
return false;
}

复制代码

拓展一下另外两种鼠标事件
onselectstart事件，禁止利用右键在网页上选取内容；
oncopy事件，禁止利用右键进行复制。
都可以捕捉到事件进行处理，如果你想单纯的禁用掉，那可以直接在body或者div中 return false掉操作即可：

<body oncontextmenu = "return false" ></body>
<body onselectstart = "return false" ></body>
<body oncopy = "return false" ></body>

复制代码

此外，针对需要还可以对video标签的其他按钮进行隐藏

// 隐藏video标签音量按钮
video::-webkit-media-controls-mute-button {
display: none !important;
}
// 隐藏video标签当前按钮
video::-webkit-media-controls-current-time-display {
display: none !important;
}
// 隐藏video标签总时间
video::-webkit-media-controls-time-remaining-display {
display: none !important;
}
// 隐藏video标签 fullscreen按钮
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}

复制代码

到此这篇关于HTML5中video标签禁止右键和下载视频的问题解决的文章就介绍到这了,更多相关HTML5 video禁止右键内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

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

戏子自 · 发表于 2024-4-21 12:03:07

我不太确定，可能需要再确认一下。

白羊atm1 · 发表于 2024-5-5 01:37:43

6666666666

丿微风徐来丶 · 发表于 2024-6-5 09:21:42

这个话题真是有趣，我也对它感兴趣。

春風秋雨 · 发表于 2024-6-15 01:16:34

你的信息来源是？我想了解更多。

可靠大鸽 · 发表于 2024-6-24 18:43:37

已测试，非常不错

星空丶 · 发表于 2024-6-25 21:14:44

看了LZ的帖子，我只想说一句很好很强大！

杰瑞宝宝123 · 发表于 2024-9-24 05:17:14

保持尊重和礼貌对待其他成员是必要的。

用户6uk3zr9 · 发表于 2024-10-10 13:04:17

非常感谢你的观点，让我受益良多！

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源