• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

HTML5 video blob

JAVA web前端中文站 2年前 (2017-07-05) 3359次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

采用 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());}}}} //web 前端中文站 www.lisa33xiaoq.net

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>

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5 video blob
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址