防止video视频被下载的几种处理办法-Toy模板网

这篇具有很好参考价值的文章主要介绍了防止video视频被下载的几种处理办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1，video禁用下载功能

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

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

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

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

4，使用blob视频流加密的形式；

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

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

防止video视频被下载的几种处理办法,前端,javascript,音视频

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>