HTML5 video blob

HTML5 xmt_herman_gcy 40085浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

今天发现慕课网中的视频播放地址使用了Blob加密。这是一种新的用法,我是第一次发现。因此便研究了一下它的用法。

采用Blob可以在一定程度上模糊住大家。例如下面的这个播放地址:

blob:http://simpl.info/884da595-7816-4211-b6c3-607c444556ef

BLOB (binary large object),二进制大对象,是一个可以存储二进制文件的容器。Video 使用 blob 二进制流需要前后端同时支持。

Java 生成 Blob 二进制流

/*
 * 在这里可以进行权限验证等操作
 */

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

HTML5 Video 使用 Blob

//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//配置请求方式、请求地址以及是否同步
xhr.open('POST', './play', 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" width="200" controls="controls"></video>

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号1:xmtxtt(5000人已满),微信号2:codedq(5000人已满),微信号3:xttblog(超2800)。备注:“xttblog”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » HTML5 video blob