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

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

例如：

 

出于好奇，研究了一番

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

这里我们讨论  如何把一个mp4地址加密为 blob链接在html5的 video标签展示

 

先直接贴上我的代码，

下面为html video标签

<video id="video_player_id" width="660" height="364" controls="controls"></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 播放器