javascript|javascript 实现blob加密视频（html video），服务端为php javascript|PHP

现在大部分的网站视频链接都是blob:http://......
例如：
文章图片

出于好奇，研究了一番
其实这种是视频mp4格式转码m3u8格式再分为多个小切片（多个小视频）结合 video.js 实现，
【javascript|javascript 实现blob加密视频（html video），服务端为php】这里我们讨论如何把一个mp4地址加密为 blob链接在html5的 video标签展示

先直接贴上我的代码，
下面为html video标签

下面为 javascript 代码

function revokeUrl(url) { window.URL.revokeObjectURL(url); } /// 请注意底下的 video_player 为你html video标签里面的 id window.onload = function(){ //创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); var url = ""; // 这里的url为你的服务端地址 //配置请求方式、请求地址以及是否同步 xhr.open('POST', url, true); //设置请求结果类型为blob xhr.responseType = 'blob'; //请求成功回调函数 xhr.onload = function (e) { if (this.status == 200) {//请求成功 //获取blob对象 var blob = this.response; var video = document.getElementById('video_player'); //获取blob对象地址，并把值赋给容器 video.onload = function(e) { window.URL.revokeObjectURL(video.src); }; var obj_url = window.URL.createObjectURL(blob); video.src = https://www.it610.com/article/obj_url; //video.play(); } }; xhr.send(); }

下面为服务端php代码

$file_dir = "...mp4"; // 你的mp4文件地址 ob_end_clean(); ob_start(); $handler= fopen($file_dir, 'r+b'); $file_size= filesize($file_dir); //声明头信息，将二进制流信息输出来 Header("Content-type: application/octet-stream"); Header("Accept-Ranges: bytes"); Header("Accept-Length: ".$file_size); Header("Content-Disposition: attachment; filename=" . basename( $file_dir)); // 输出文件内容 echo fread($handler,$file_size); fclose($handler); ob_end_flush(); exit;

结果展示：