js blob php_javascript 实现blob加密视频（html video），服务端为php

现在大部分的网站视频链接都是  blob:http://......

例如：

出于好奇，研究了一番

其实这种是 视频mp4格式转码m3u8格式  再分为多个小切片(多个小视频)结合 video.js 实现，

这里我们讨论  如何把一个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 = 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;

结果 展示：

结语：虽然可以将mp4文件 加密成blob形式，但主流网站用的视频大都不是mp4格式，都是 m3u8格式，

利用 开源软件 FFMpeg mp4转为 m3u8格式，再结合video.js 播放器