利用blob 加密防下載


https://blog.csdn.net/qq_37026254/article/details/94396320?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

 

 

一些網站的視頻為了防止下載,通常會采用blob加密的做法;
其實這不是特殊的視頻傳輸協議,只是一種 HTML5 Video Blob格式。
並且大部分網頁視頻的格式都是 m3u8。

參考的內容:

瀏覽器兼容
在這里插入圖片描述
下面來簡單說明一下怎么理解和操作:

讀取

這里假設服務器上已經有一份文件,現在要前端加密展示,目錄如下:
在這里插入圖片描述
操作主要分為兩部分:

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); var mime = mime[1]; while (n--) { u8arr[n] = bstr.charCodeAt(n); } return window.URL.createObjectURL(new Blob([u8arr], { type: mime })); } fileUpload(); </script> </html>

在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM