javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 防止video视频被下载

防止video视频被下载的处理方法汇总

作者:Python User

这篇文章主要介绍了防止video视频被下载的处理方法汇总,本文给大家介绍了多种方法帮助大家解决防止video视频被下载的问题,补充介绍了解决video标签视频禁止下载方法,感兴趣的朋友一起看看吧

防止video视频被下载的处理方法

1,video禁用下载功能

<video controlslist="nodownload"></video>

2,隐藏鼠标右键,禁止复制链接

document.oncontextmenu = function () {
	return false;
}

3,使用云点播等第三方播放控件,最好的话设置一下防盗链;

4,使用blob视频流加密的形式;

部分浏览器,如qq浏览器会拦截video标签获取到播放链接,当用户鼠标移如播放器时会出现下载字样,为了解决这一问题,我们采用blob视频流的形式进行加密;

目前市面上采用这种方式的比较多:比如哔哩哔哩,西瓜视频等,如图:

BLOB :二进制大对象,是一个可以存储二进制文件的容器。Video 使用 blob 二进制流需要前后端同时支持。

拿到blob对象后,再通过URL.createObjectURL生成临时地址,赋值给video标签的src属性,这样就可以了。但其实可以直接从服务端接收二进制对象,就是服务端把视频文件转换成二进制对象,通过接口给到前端,前端再生成dom string。

其中,在浏览器端也提供了BLOB相关的API,通过new Blog(…)生成blog对象。

前端获取这个blob对象后,的操作如下;

jq写法:

    let xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://localhost:3001/video', true)
    xhr.responseType = 'blob'
    xhr.onload = function(e) {
      if (this.status === 200) {
        // 获取blob对象
        let blob = this.response
        console.log(blob)
        // 获取blob对象地址,并把值赋给容器
        $("#my-video").attr("src", URL.createObjectURL(blob));
      }
    }
    xhr.send()

js原生写法:

 <script type="text/javascript">
  var video = document.getElementById("my-video");  
  window.URL = window.URL || window.webkitURL;  
  var xhr = new XMLHttpRequest();  
  var play_url = 'test.mp4';
  xhr.open("GET", play_url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {  
  	if (this.status == 200) {  
  		var blob = this.response;  console.log(blob);
  		video.onload = function(e) {  
  			window.URL.revokeObjectURL(video.src);
  		};
    	video.src = window.URL.createObjectURL(blob);
    }
  }
  xhr.send(); 
</script>

5,视频切片加密:

如果是加载一个大视频的话,这就会浪费大量的流量,并且加载过程会持续占用带宽。

这个时候我们会用到视频分片处理。

试想一下,如果我们把视频切成一段一段的,每次只加载一段,看完了再加载一段,这样能有效的节省资源。

还是以B站的一个视频为例,在F12中的Network里可以看到,网站一直在一段一段的请求视频流的数据。(PS:这个m4s是HTML的一种格式)

切片加密原理:将视频从MP4文件切片成多个ts文件,并使用AES-128对每一片视频进行加密,最后生成m3u8文件。这里我们需要用到ffmpeg。

补充:

解决video标签视频禁止下载方法

1、屏蔽鼠标右键:<body oncontextmenu = "return false">

2、屏蔽视频播放器右下角三个点的下载按钮(chrome会显示):

<video class="edui-upload-video  vjs-default-skin  video-js" controls="true" controlslist="nodownload" preload="none" width="420" height="280" src="" data-setup="{}" controlslist="nodownload" poster=""></video>

video是需要提供一个视频地址,所以这两种方式并不是彻底屏蔽下载链接(也可能有其他方式)。

所以,如果不需要被恶意转载或者共享的视频,不建议使用video标签。

您可能感兴趣的文章:
阅读全文