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

相关文章

  • 点评js异步加载的4种方式

    点评js异步加载的4种方式

    这篇文章主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JavaScript实现身份证验证代码实例

    JavaScript实现身份证验证代码实例

    这篇文章主要介绍了JavaScript实现身法证验证代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript实现鼠标点击导航栏变色特效

    JavaScript实现鼠标点击导航栏变色特效

    本文给大家分享一段基于js代码实现的鼠标点击导航栏变色效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-02-02
  • js replace()去除代码中空格的实例

    js replace()去除代码中空格的实例

    下面小编就为大家带来一篇js replace()去除代码中空格的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS实现图片放大镜插件详解

    JS实现图片放大镜插件详解

    这篇文章主要为大家详细介绍了JS实现图片放大镜插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • xWin之JS版(2-26更新)

    xWin之JS版(2-26更新)

    xWin之JS版(2-26更新)...
    2007-01-01
  • 分页栏的web标准实现

    分页栏的web标准实现

    分页栏是网页上最常见不过的一个组件,本博文给出分页栏的一个web2.0标准示例,并作简要分析
    2011-11-11
  • JS正则替换掉小括号及内容的方法

    JS正则替换掉小括号及内容的方法

    下面小编就为大家带来一篇JS正则替换掉小括号及内容的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS实现为表格动态添加标题的方法

    JS实现为表格动态添加标题的方法

    这篇文章主要介绍了JS实现为表格动态添加标题的方法,涉及javascript中createCaption方法添加标题的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • javascript实现点亮灯泡特效示例

    javascript实现点亮灯泡特效示例

    这篇文章主要介绍了javascript实现点亮灯泡特效示例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论