怎样做视频播放地址加密，其实非常简单，我们观看视频网站的时候，发现video标签中的src属性值为blob:http，并不是真实的视频链接地址。使用Blob对象隐藏真实的资源路径，音频，视频，图片，都可以使用其Blob二进制数据流传输，在一定程度上可以起数据的加密作用，废话不多说，直接上代码吧。
教程开始
①、在网站根目录，新建一个 index.php 文件，代码如下；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blob Url</title>
</head>
<body>
<video id="video" width="400" controls="controls"></video>
<script type="text/javascript">
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//配置请求方式、请求地址以及是否同步
xhr.open('POST', 'blob.php', true);
//设置请求结果类型为blob
xhr.responseType = 'blob';
//请求成功回调函数
xhr.onload = function(e) {
if (this.status == 200) {//请求成功
//获取blob对象
var blob = this.response;
//获取blob对象地址，并把值赋给容器
document.getElementById("video").src = URL.createObjectURL(blob);
}
};
xhr.send();
</script>
</body>
</html>②、在网站根目录，新建一个 blob.php 文件，代码如下；
<?php
// 返回二进制流数据
$file_path = 'video.mp4';// 文件地址
//$file_path = 'G:/phpstudy_pro/aaaaaaa49.com/video.mp4';// 文件地址
$file_size = filesize($file_path);// 文件大小
/*建议使用 file_get_contents() 读取文件内容，性能比 fread() 好*/
//$oct_data = fread(fopen($file_path, "r"), $file_size);// 读取文件内容
$oct_data = file_get_contents($file_path);// 读取文件内容
// 输出
header("Content-type: video/mpeg4;charset=UTF-8");
header("Content-Length: " . $file_size);
echo $oct_data;③、在网站根目录，将视频命名为 video.mp4 文件名。
完成，对的，没错，两个文件就行了，代码就是这么简单，就这样就可以使用blob:http隐藏视频链接了。
想用框架
想用框架，想用解析，想给视频加载前，来个页面预加载，这个都不是什么难事，直接修改index.php的代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blob Url</title>
</head>
<body>
<style type="text/css">
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:9999;display:flex;justify-content:center;align-items:center}
#loader{width:20px;height:20px;border:3px solid #f7a7a7;border-top-color:#1068ec;border-radius:50%;animation:spin 1s infinite linear;display:flex;justify-content:center;align-items:center}#loader span{font-size:16px;font-weight:bold}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
</style>
<div id="preloader">
<div id="loader"></div>
</div>
<iframe id="video" scrolling="no" allowtransparency="true" frameborder="0" style="width:100%;height:100%;frameborder:0;position:absolute;top:0;left:0;"></iframe>
<script type="text/javascript">
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//配置请求方式、请求地址以及是否同步
xhr.open('POST', 'blob.php', true);
//设置请求结果类型为blob
xhr.responseType = 'blob';
//请求成功回调函数
xhr.onload = function(e) {
if (this.status == 200) {//请求成功
//获取blob对象
var blob = this.response;
// 加载iframe框架
setTimeout(function() {
//获取blob对象地址，并把值赋给容器
document.getElementById("video").src = '/bili/?url='+URL.createObjectURL(blob)+'';
//隐藏加载页面
var preloader = document.getElementById('preloader').style.display = 'none';
}, 5000); // 延迟5秒加载iframe框架
}
};
xhr.send();
</script>
</body>
</html>这样就完成了，使用iframe全屏播放，使用视频解析播放，还给播放前加了个预加载特效，哎，试试看吧，我敢肯定，你的服务器带不动的。
代码短板
大多数的视频网站，都是使用blob:http隐藏链接，但是，这个blob:http加密链接，非常的短板，换句话就是说，需要强大的服务器配置，以及服务器大宽带支持才能用。这也就是为什么小网站，都不使用Blob的原因，如果你，不撞南墙不回头，不到黄河心不死，非常的执着，你可以测试一下就会发现，这代码一般站长都是用不起的。
这段代码，小千亲测，自己的8H8G10M表示带不动，另一台16H16G50M的还算勉强，但是打开属实缓慢，这种是先下载后输出的，本地测试可以播放，但线上播放就加载不出来，不是代码错误，而是下载视频需要时间，把整个视频文件下载完成后再读取，从而导致读取播放缓慢，这个算是Blob加密的代码短板，不是物理机和百兆宽带表示用不起。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）