php与js实现视频分片二进制blob加密解密播放
最近在看视频的时候，本想下载视频，于是我打开了调试模式，结果发现video标签中的src是blob:https//
这是一种二进制流传输模式，比较适合保护视频版权和防止恶意下载，服务器输出一段加密的二进制流，浏览器端对二进制流进行解密后传给video播放器进行播放，由于视频文件比较大，所以在实际操作中会进行分片操作，我们今天就演示一下后端php，前端js来进行视频二进制流传输。
php端代码
<?php
header("Content-type:text/html;charset=utf-8");
$file_name = "demo.mp4";
//用以解决中文不能显示出来的问题
$file_name = iconv("utf-8", "gb2312", $file_name);
$file_sub_path = "../video/";
$file_path = $file_sub_path.$file_name;
//首先要判断给定的文件存在与否
if (!file_exists($file_path)) {
echo "没有该文件";
return;
}
$fp = fopen($file_path, "r");
$file_size = filesize($file_path);
//下载文件需要用到的头
Header("Content-type: application/octet-stream");
Header("Accept-Ranges: bytes");
Header("Accept-Length:".$file_size);
Header("Content-Length:".$file_size);
Header("Content-Disposition: attachment; filename=".$file_name);
$buffer = 1024;
$file_count = 0;
//向浏览器返回数据
while (!feof($fp) && $file_count < $file_size) {
$file_con = fread($fp, $buffer);
$file_count += $buffer;
echo $file_con;
}
fclose($fp);
?>html js 代码<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PHP PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
/**
* base64 to blob二进制
*/
function dataURItoBlob(dataURI) {
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
var byteString = atob(dataURI.split(',')[1]); //base64 解码
var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
var intArray = new Uint8Array(arrayBuffer); //创建视图
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {
type: mimeString
});
}
/**
*
* blob二进制 to base64
**/
function blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
}
reader.readAsDataURL(blob);
}
bready(function() {
let xhr = new XMLHttpRequest();
xhr.open('POST', '', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status === 200) {
// 获取blob对象
let blob = this.response;
console.log(blob);
// 获取blob对象地址，并把值赋给容器
$("#demovideo").attr("src", URL.createObjectURL(blob));
$("#demovideo").trigger("play"); //
}
}
xhr.send();
});
</script>
<style>
</style>
</head>
<body>
<video id="demovideo"></video>
</body>
</html>上面演示了只是视频的二进制传输，那么加密呢加密的办法有2种
1、后端对二进制流进行aes加密，前端js对二进制流解密
2、后端将二进制流转成base64字符串，前端js对base64解码转成blob二进制流
这两种传输的Accept-Ranges不一样，第一种是bytes，第二种是none
完整的webide项目地址http://studio.bfw.wiki/Studio/Open.html?projectid=15783967437932910028
{{collectdata}}
网友评论0