当前位置：首页 > 前端 > javascript > php与js实现视频分片二进制blob加密解密播放

php与js实现视频分片二进制blob加密解密播放

DChen3年前 (2021-11-19)javascript7.03 K0

最近在看视频的时候，本想下载视频，于是我打开了调试模式，结果发现video标签中的src是blob:https// php与js实现视频分片二进制blob加密解密播放前端开发音视频开发 Php Javascript Html5 第1张

这是一种二进制流传输模式，比较适合保护视频版权和防止恶意下载，服务器输出一段加密的二进制流，浏览器端对二进制流进行解密后传给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);
?>

前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PHP PAGE</title>
<script id="bfwone" type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/Javascript">

$(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>
</head>
<body>

<video id="demovideo" controls muted="muted"></video>

</body>
</html>

上面演示了只是视频的二进制传输，那么加密呢

加密的办法有2种

1、后端对二进制流进行aes加密，前端js对二进制流解密

2、后端将二进制流转成base64字符串，前端js对base64解码转成blob二进制流

这两种传输的Accept-Ranges不一样，第一种是bytes，第二种是none

喜欢 (0) 打赏分享