脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js禁止下载视频

基于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禁止下载视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论

关注微信公众号

扫一扫