利用blob 加密防下载

一些网站的视频为了防止下载,通常会采用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>

在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值