HTML5 video blob

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

更多精彩内容请看 web前端中文站
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>
2
如无特殊说明,文章均为原作者原创,转载请注明出处
  • 转载请注明来源:HTML5 video blob
  • 本文永久链接地址:https://www.lisa33xiaoq.net/433.html

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到