防止video視頻被下載的處理方法匯總

更新時間：2024年02月03日 09:50:26 作者：Python User

這篇文章主要介紹了防止video視頻被下載的處理方法匯總,本文給大家介紹了多種方法幫助大家解決防止video視頻被下載的問題,補充介紹了解決video標(biāo)簽視頻禁止下載方法,感興趣的朋友一起看看吧

防止video視頻被下載的處理方法

1，video禁用下載功能

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

2，隱藏鼠標(biāo)右鍵，禁止復(fù)制鏈接

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

3，使用云點播等第三方播放控件，最好的話設(shè)置一下防盜鏈；

4，使用blob視頻流加密的形式；

部分瀏覽器，如qq瀏覽器會攔截video標(biāo)簽獲取到播放鏈接，當(dāng)用戶鼠標(biāo)移如播放器時會出現(xiàn)下載字樣，為了解決這一問題，我們采用blob視頻流的形式進(jìn)行加密；

目前市面上采用這種方式的比較多：比如嗶哩嗶哩，西瓜視頻等，如圖：

BLOB :二進(jìn)制大對象，是一個可以存儲二進(jìn)制文件的容器。Video 使用 blob 二進(jìn)制流需要前后端同時支持。

拿到blob對象后，再通過URL.createObjectURL生成臨時地址，賦值給video標(biāo)簽的src屬性，這樣就可以了。但其實可以直接從服務(wù)端接收二進(jìn)制對象，就是服務(wù)端把視頻文件轉(zhuǎn)換成二進(jìn)制對象，通過接口給到前端，前端再生成dom string。

其中，在瀏覽器端也提供了BLOB相關(guān)的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，視頻切片加密：

如果是加載一個大視頻的話，這就會浪費大量的流量，并且加載過程會持續(xù)占用帶寬。

這個時候我們會用到視頻分片處理。

試想一下，如果我們把視頻切成一段一段的，每次只加載一段，看完了再加載一段，這樣能有效的節(jié)省資源。

還是以B站的一個視頻為例，在F12中的Network里可以看到，網(wǎng)站一直在一段一段的請求視頻流的數(shù)據(jù)。（PS：這個m4s是HTML的一種格式）

切片加密原理：將視頻從MP4文件切片成多個ts文件，并使用AES-128對每一片視頻進(jìn)行加密，最后生成m3u8文件。這里我們需要用到ffmpeg。

補充：

解決video標(biāo)簽視頻禁止下載方法

1、屏蔽鼠標(biāo)右鍵：<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是需要提供一個視頻地址，所以這兩種方式并不是徹底屏蔽下載鏈接（也可能有其他方式）。

所以，如果不需要被惡意轉(zhuǎn)載或者共享的視頻，不建議使用video標(biāo)簽。

您可能感興趣的文章: