怎样做视频播放地址加密，其实非常简单，我们观看视频网站的时候，发现video标签中的src属性值为blob:http，并不是真实的视频链接地址。使用Blob对象隐藏真实的资源路径，音频，视频，图片，都可以使用其Blob二进制数据流传输，在一定程度上可以起数据的加密作用，废话不多说，直接上代码吧。
教程开始
①、在网站根目录，新建一个 index.php 文件，代码如下；
Source Code
- <!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 文件，代码如下；
Source Code
- <?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的代码如下。
Source Code
- <!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加密的代码短板，不是物理机和百兆宽带表示用不起。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）