利用blob 加密防下載
阿新 • • 發佈：2020-09-04
一些網站的視訊為了防止下載，通常會採用blob加密的做法；
其實這不是特殊的視訊傳輸協議，只是一種 HTML5 Video Blob格式。
參考的內容：
瀏覽器相容
下面來簡單說明一下怎麼理解和操作：
讀取
這裡假設伺服器上已經有一份檔案，現在要前端加密展示，目錄如下：
操作主要分為兩部分：
1.後臺讀取檔案，並轉成二進位制推送到前臺
file_get_contents： 轉為二進位制內容base64_encode： 對資料進行編碼
<?php
header("Content-type:image/jpeg");
echo base64_encode(file_get_contents('images/1.jpeg'));
?> 2.前端讀到二進位制內容，轉成blob格式，賦值到對應video
因為後臺傳輸過來的只有後面的二進位制內容，不包括識別符號，
所以方法dataURLtoBlob的引數中拼接了識別符號：data:image/png;base64,
當然這裡的拼接內容也可以後臺直接返回
//讀取內容
var fileUpload = function(_link,_type){
$.ajax({
url: 'post.php',
type:'post',
success:function(req){
//請求成功時處理
$('img').attr('src',dataURLtoBlob('data:image/jpeg;base64,'+req));
},
})
} //base64 => blob
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/);
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
var mime = mime[1];
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return window.URL.createObjectURL(new Blob([u8arr], { type: mime }));
}整個html內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img,video{width: }
</style>
</head>
<body>
<input type="file" name="main" id="main" value="" accept="image/png, image/jpeg, image/gif, image/jpg" onchange="uploadImg(event)">
<input type="file" accept="video/*" id="video" name="video" onchange="uploadVideo(event)">
<video></video>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var fileUpload = function(_link,_type){
$.ajax({
url: 'post.php',
type:'post',
success:function(req){
//請求成功時處理
$('img').attr('src',dataURLtoBlob('data:image/jpeg;base64,'+req));
},
})
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/);
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n