实现blob加密视频地址（html video）

1、mp4文件转为blob（相当于后台将mp4转换成了二进制数据返回到前端，所以大文件不实用）

PHP：

 1         $file_path = "...mp4"; //视频文件地址
 2         ob_end_clean();
 3         ob_start();
 4         //打开文件
 5         $handler = fopen($file_path, 'rb');
 6         $file_size = filesize($file_path);
 7         //声明头信息
 8         Header("Content-type: application/octet-stream");
 9         Header("Accept-Ranges: bytes");
10         Header("Accept-Length: ".$file_size);
11         Header("Content-Disposition: attachment; filename=" . basename( $file_path));
12         // 输出文件内容
13         $oct_data = fread($handler,$file_size);
14         fclose($handler);
15         ob_end_flush();
16         
17         return $oct_data;

JS：

 1         //创建XMLHttpRequest对象
 2         var xhr = new XMLHttpRequest();
 3         var url ="";//服务端地址
 4         //配置请求方式、请求地址以及是否同步
 5         xhr.open('POST', url, true);
 6         //设置请求结果类型为blob
 7         xhr.responseType = 'blob';
 8         //请求成功回调函数
 9         xhr.onload = function (e) {
10             if (this.status == 200) {//请求成功
11                 var video = document.getElementById('video_player');
12                 //获取blob对象地址，并把值赋给容器
13                 video.onload = function(e) {
14                     window.URL.revokeObjectURL(video.src);
15                 };
16                 video.src = window.URL.createObjectURL(this.response);
17                 video.play();
18             }
19         };
20         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
21         xhr.send('id='+id);//传递参数

2、m3u8转为blob（其实m3u8地址还是暴露在了前端，只是隐藏了video标签里的src，显示为blob链接）

JS（调用hls.js）：

 1         var url ="...m3u8";//m3u8地址
 2         var video = document.getElementById('video_player');
 3         if(Hls.isSupported()) {
 4             var hls = new Hls();
 5             hls.loadSource(url);
 6             hls.attachMedia(video);
 7             hls.on(Hls.Events.MANIFEST_PARSED,function() {
 8                 video.play();
 9             });
10         }
11         else if (video.canPlayType('application/vnd.apple.mpegurl')) {
12             video.src = url;
13             video.addEventListener('loadedmetadata',function() {
14                 video.play();
15             });
16         }