基于JS实现页面视频video标签禁止下载(下载按钮+右击菜单)
更新时间：2024年02月03日 10:00:02 作者：Dreamingnini
最近做项目遇到这样的需求,禁止用户浏览页面的时候下载页面的视频,网上看到下载视频的方法有两种,本文对每种方法做详细分析,对js禁止下载视频相关知识感兴趣的朋友一起看看吧
项目需求：禁止用户浏览页面的时候下载页面的视频
解决：
网页上下载视频的方法有两种
1、视频自带的下载按钮
2、右击页面出现菜单中的“另存为”
对于1，因为后台管理中使用的插件是是百度的Ueditor，所以按照Ueditor的配置修改即可去掉下载按钮
在ueditor.all.js文件中加入框中代码
case 'video':
var ext = url.substr(url.lastIndexOf('.') + 1);
if(ext == 'ogv') ext = 'ogg';
str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
'controlsList="nodownload" + width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
'<source src="' + url + '" type="video/' + ext + '" /></video>';
break;在ueditor.all.min.js文件中加入框中代码
对于2，采用监听，在mounted中加入代码，但是该方法会使得整个页面在右击的时候都禁止出现菜单，可以按照需求，修改添加的位置，以达到局部禁止右击出现菜单的功能
window.addEventListener('contextmenu',function(e){
e.preventDefault();
},false)到此这篇关于基于JS实现页面视频video标签禁止下载(下载按钮+右击菜单)的文章就介绍到这了,更多相关js禁止下载视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Bootstrap Table使用整理（三）的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下2014-05-05
本文通过一个小小题目逐步走进javascript 异步调用问题，本文附有解答过程，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要介绍了javascript中动态加载js文件多种解决办法，有需要的朋友可以参考一下2013-11-11
下面小编就为大家带来一篇基于Bootstrap框架菜鸟入门教程(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
根据新界面的要求，需要一部分图片来增强日期控件的美观性。考虑到既要实现加载图表的目标，又要保持控件的独立性以便将来的移植。2010-09-09
本篇文章主要是对js+div实现图片滚动效果的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
uniapp添加操作日志的方法(uniapp、日志、文件、html5+)
近期一直在写微信小程序,有一个问题一直没有解决,就是在测试环境中调试代码会打印很多日志,方便看到问题所在,这篇文章主要给大家介绍了关于uniapp添加操作日志(uniapp、日志、文件、html5+)的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Javascript动态创建div的方法,是javascript节点操作的典型应用,非常具有实用价值,需要的朋友可以参考下2015-02-02
最新评论