HTML5怎么实现禁止android视频另存为

HTML5实现禁止android视频另存为的方法:1、在Video标签内添加“controlslist=”nodownload””属性;2、通过添加“$(“#video01”).bind(‘contextmenu’, function () {return false;})”代码实现禁止视频区域内的右键另存为功能即可。

HTML5怎么实现禁止android视频另存为

本教程操作环境:Windows10系统、HTML5版、DELL G3电脑

HTML5怎么实现禁止android视频另存为?

HTML5 Video标签实现屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载

最近公司发现有竞争对手下载我司网站上的视频,并据为已用,严重损害我司利益,所以让我在网站上添加禁止鼠标右键下载视频的功能。

立即学习“前端免费学习笔记(深入)”;

步骤一,先屏蔽视频播放器右下角三个点的下载按钮(chrome会显示三个点)

在Video标签内添加 controlslist=”nodownload” 属性

        
视频描述
测试代码
    

登录后复制

c88737ee1727b6dd92371125a59f63e.jpg

完成步骤一,确实可以把视频播放器右下角三个点的下载按钮隐藏(如上图所示),但是你以为这样就完全禁止了吗?其实不然,点击鼠标右键依然可以视频另存为,把视频下载下来的。想要完全禁止,还要继续完成步骤二。

步骤二,禁止视频区域内的右键另存为功能,这个只需要一行js代码即可搞定。

如果没有添加如下的js代码,在视频区域内,点击鼠标右键,会显示图中左侧功能,添加之后,则不会显示

    // html5-video标签屏蔽右键视频另存为的js代码    $("#video01").bind('contextmenu', function () {        return false;    })

登录后复制

c5d78202210cb9af007b243c3d4c5ac.jpg

说明:myVideo是video标签的id,这样就可以屏蔽video标签区域的右键功能哦。

推荐学习:《HTML视频教程》

以上就是HTML5怎么实现禁止android视频另存为的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2920377.html

(0)
上一篇 2025年3月11日 18:19:05
下一篇 2025年3月7日 07:55:20

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论