Dplayer Blob对视频播放地址加密

写demo的时候遇到的问题，想要记录一下，正好也没有发表过文章所以想借此记录一下，内容有很多是查询资料获得的，毕竟我只是个萌新。

以下内容涉及到：Java 使用blob对H5视频播放进行加密
DplayerH5视频播放器
js中Blob转字符串

普通Mp4格式的视频

使用Blob将普通格式的视频加密并用Dplayer播放器进行播放比较简单。

Java后台将视频以文件流的形式传给前端

	@ResponseBody
    @RequestMapping("/getVideoSrc")
    public OutputStream getVideoSrc(HttpServletRequest httpServletRequest,
                                    HttpServletResponse httpServletResponse){
        //1.创建文件对象
        File f = new File("E:/test/1.mp4");
        //2.获取文件名称
        String fileName = f.getName();
        //3.导出文件
        String agent = httpServletRequest.getHeader("User-Agent").toUpperCase();
        InputStream fis = null;
        OutputStream os = null;
        try {
            //4.获取输入流
            fis = new BufferedInputStream(new FileInputStream(f.getPath()));
            byte[] buffer;
            buffer = new byte[fis.available()];
            fis.read(buffer);
            httpServletResponse.reset();
            //5.由于火狐和其他浏览器显示名称的方式不相同，需要进行不同的编码处理
            if(agent.indexOf("FIREFOX") != -1){//火狐浏览器
                httpServletResponse.addHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("GB2312"),"ISO-8859-1"));
            }else{//其他浏览器
                httpServletResponse.addHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(fileName, "UTF-8"));
            }
            //6.设置response编码
            httpServletResponse.setCharacterEncoding("UTF-8");
            httpServletResponse.addHeader("Content-Length", "" + f.length());
            //设置输出文件类型
            httpServletResponse.setContentType("video/mpeg4");
            //7.获取response输出流
            os = httpServletResponse.getOutputStream();
            os.flush();
            //8.输出文件
            os.write(buffer);
        }catch(Exception e){
            System.out.println(e.getMessage());
        } finally{
            //关闭流
            try {
                if(fis != null){ fis.close(); }

                if(os != null){ os.flush(); }

                if(os != null){os.close(); }

            } catch (IOException e) {
                System.out.println(e.getMessage());
            }
        }

        return os;
    }

前端使用JavaScript将视频文件接收并转为Blob对象

	//创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    //配置请求方式、请求地址以及是否同步
    xhr.open('POST', '/armystudy/blob/getVideoSrc', true);
    //设置请求结果类型为blob
    xhr.responseType = 'blob';
    //请求成功回调函数
    xhr.onload = function(e) {
        if (this.status == 200) {//请求成功
            //获取blob对象
            var blob = this.response;
            //获取blob对象地址，并把值赋给容器
            $("#sound").attr("src", URL.createObjectURL(blob));
        }
    };
    xhr.send();

html

<video id="sound" type="video/mp4" controls="controls" autoplay="autoplay"
       webkit-playsinline="true"    playsinline="true"   heigth="100%"></video>

文章来源：https://cloud.tencent.com/developer/article/1335832

使用Dplayer播放器

首先先要引用Dplayer的js文件

<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.jpg',
        thumbnails: 'thumbnails.jpg',
    },
    subtitle: {
        url: 'webvtt.vtt',
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/',
    },
});

将Blob和使用Dplayer播放视频进行整合

java后台不用变，只需要将js内容进行合并

//创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    //配置请求方式、请求地址以及是否同步
    xhr.open('GET', '/test03', true);
    console.log("请求")
    //设置请求结果类型为blob
    xhr.responseType = 'blob';

    xhr.onload = function(e){
        if (this.status == 200 ){
            //获取blob对象
            var blob = this.response;
            var dp = new DPlayer({
                 container: document.getElementById('dplayer'),//播放器容器元素
                 theme: '#FADFA3', //控件的颜色
                 loop: false,//视频循环播放
                    screenshot: true,//开启截图，如果开启，视频和视频封面需要允许跨域
                    hotkey: true,//开启热键，支持快进、快退、音量控制、播放暂停
                    lang: 'zh-cn',//可选值: 'en', 'zh-cn', 'zh-tw'
                    volume: 0.7,//默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
                    video: {
                        url: URL.createObjectURL(blob),//视频链接
                        pic: '',//封面
                        type: 'hls',//'auto'可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型
                    }
                });
        }
    }
    xhr.send();

使用Blob加密.m3u8类型的流媒体文件

这个方面内容我查了很久的资料都没有相关的内容，在使用dplayer播放器情况下如果按照上面的那个方案使用blob将.m3u8文件进行加密，会出现一个问题：前端在请求.ts切片文件的时候的请求地址的前面会加上blob:导致请求错误404，然后我一直陷入一个误区：为什么非要将.m3u8文件使用Blob进行加密隐藏。 可以将请求.m3u8的地址进行隐藏，这样可以达到一样的目的，这是我的一个思路，如果大家有更好的思路可以评论出来，让我学习一下。

将Bolb文件转成字符串

var reader = new FileReader();
  reader.onload = function(event){
    var content = reader.result;//内容就在这里
  };
  reader.readAsText(blob);

将上面的内容整合一下就可以实现使用blob隐藏.m3u8的地址，达到和使用blob隐藏普通视频格式一样的效果。

//创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    //配置请求方式、请求地址以及是否同步
    xhr.open('GET', '/test03', true);
    console.log("请求")
    //设置请求结果类型为blob
    xhr.responseType = 'blob';

    xhr.onload = function(e){
        if (this.status == 200 ){
            //获取blob对象
            var blob = this.response;

            var reader = new FileReader();
            reader.onload = function (event) {
                var content = reader.result;//获取Blob的内容
                var dp = new DPlayer({
                    container: document.getElementById('dplayer'),//播放器容器元素
                    theme: '#FADFA3', //控件的颜色
                    loop: false,//视频循环播放
                    screenshot: true,//开启截图，如果开启，视频和视频封面需要允许跨域
                    hotkey: true,//开启热键，支持快进、快退、音量控制、播放暂停
                    lang: 'zh-cn',//可选值: 'en', 'zh-cn', 'zh-tw'
                    volume: 0.7,//默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
                    video: {
                        url: content,//视频链接
                        pic: '',//封面
                        type: 'hls',//'auto'可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型
                    }
                });
               
            }
            reader.readAsText(blob);
        }
    }
    xhr.send();