防止video視頻被下載的處理方法匯總
防止video視頻被下載的處理方法
1,video禁用下載功能
<video controlslist="nodownload"></video>
2,隱藏鼠標(biāo)右鍵,禁止復(fù)制鏈接
document.oncontextmenu = function () {
return false;
}3,使用云點(diǎn)播等第三方播放控件,最好的話設(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,視頻切片加密:
如果是加載一個大視頻的話,這就會浪費(fèi)大量的流量,并且加載過程會持續(xù)占用帶寬。
這個時候我們會用到視頻分片處理。
試想一下,如果我們把視頻切成一段一段的,每次只加載一段,看完了再加載一段,這樣能有效的節(jié)省資源。
還是以B站的一個視頻為例,在F12中的Network里可以看到,網(wǎng)站一直在一段一段的請求視頻流的數(shù)據(jù)。(PS:這個m4s是HTML的一種格式)
切片加密原理:將視頻從MP4文件切片成多個ts文件,并使用AES-128對每一片視頻進(jìn)行加密,最后生成m3u8文件。這里我們需要用到ffmpeg。

補(bǔ)充:
解決video標(biāo)簽視頻禁止下載方法
1、屏蔽鼠標(biāo)右鍵:<body oncontextmenu = "return false">
2、屏蔽視頻播放器右下角三個點(diǎn)的下載按鈕(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)簽。
相關(guān)文章
JavaScript高級程序設(shè)計閱讀筆記(十六) javascript檢測瀏覽器和操作系統(tǒng)-detect.js
javascript檢測瀏覽器和操作系統(tǒng) detect.js使用介紹,需要的朋友可以參考下2012-08-08
Bootstrap實現(xiàn)響應(yīng)式導(dǎo)航欄效果
這篇文章主要介紹了Bootstrap實現(xiàn)響應(yīng)式導(dǎo)航欄效果,導(dǎo)航欄是一個很好的功能,是Bootstrap網(wǎng)站的一個突出特點(diǎn),本文帶領(lǐng)大家學(xué)習(xí)實現(xiàn)Bootstrap導(dǎo)航欄,需要的朋友可以參考下2015-12-12
下面給大家匯總的幾個javascript實現(xiàn)的分頁代碼,當(dāng)然必須要結(jié)合后臺代碼實現(xiàn)。大家可以自行分析一下代碼,希望能夠給大家?guī)硪欢ǖ膸椭?/div> 2015-08-08
JavaScript輸出所選擇起始與結(jié)束日期的方法
這篇文章主要介紹了JavaScript輸出所選擇起始與結(jié)束日期的方法,涉及javascript結(jié)合HTML5元素操作日期運(yùn)算的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-07-07最新評論

