今天发现慕课网中的视频播放地址使用了Blob加密。这是一种新的用法，我是第一次发现。因此便研究了一下它的用法。
采用Blob可以在一定程度上模糊住大家。例如下面的这个播放地址：
|
1 |
blob:http://simpl.info/884da595-7816-4211-b6c3-607c444556ef |
BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。Video 使用 blob 二进制流需要前后端同时支持。
Java 生成 Blob 二进制流
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/* * 在这里可以进行权限验证等操作 */ //创建文件对象 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//创建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代码：
|
1 |
<video id="sound" width="200" controls="controls"></video> |
