javascript+php 實現blob加密視頻（html video）

• 1、mp4地址加密為blob鏈接在html5的video標簽展示

PHP：

        $file_path = "...mp4"; //視頻文件地址
        ob_end_clean();
        ob_start();
        //打開文件
        $handler = fopen($file_path, 'rb');
        $file_size = filesize($file_path);
        //聲明頭信息
        Header("Content-type: application/octet-stream");
        Header("Accept-Ranges: bytes");
        Header("Accept-Length: ".$file_size);
        Header("Content-Disposition: attachment; filename=" . basename( $file_path));
        // 輸出文件內容
        $oct_data = fread($handler,$file_size);
        fclose($handler);
        ob_end_flush();
        
        return $oct_data;

JS：

        //創建XMLHttpRequest對象
        var xhr = new XMLHttpRequest();
        var url ="";//服務端地址
        //配置請求方式、請求地址以及是否同步
        xhr.open('POST', url, true);
        //設置請求結果類型為blob
        xhr.responseType = 'blob';
        //請求成功回調函數
        xhr.onload = function (e) {
            if (this.status == 200) {//請求成功
                var video = document.getElementById('video_player');
                //獲取blob對象地址，並把值賦給容器
                video.onload = function(e) {
                    window.URL.revokeObjectURL(video.src);
                };
                video.src = window.URL.createObjectURL(this.response);
                video.play();
            }
        };
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('id='+id);//傳遞參數

 

• 2、用FFMpeg將視頻轉為m3u8格式

 JS（調用hls.js）：

        var url ="...m3u8";//m3u8地址
        var video = document.getElementById('video_player');
        if(Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED,function() {
                video.play();
            });
        }
        else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = url;
            video.addEventListener('loadedmetadata',function() {
                video.play();
            });
        }

 

• 3、m3u8地址加密為blob鏈接

 

 

。。。待更新