Html5通过数据流方式播放视频的实现


Posted in HTML / CSS onApril 27, 2021

本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件,可以兼容PC、Android和IOS环境。

H5页面可以通过<video> 标签来播放视频。一般的方式如下:

<!DOCTYPE HTML>
<html>
<body>

<video src="/i/movie.mp4" controls="controls">
your browser does not support the video tag
</video>

</body>
</html>

src中指定了要播放的视频的URL,为具体的视频文件路径。当将访问请求变为getVideo.do?fileId=xxx 这种形式,服务端返回字节流的时候后端实现需要一些更改。

一般的方式是读本地文件然后写到response中,代码实现如下:

public void downFile(File downloadFile, 
      HttpServletResponse response, 
      HttpServletRequest request) throws Exception {
 response.reset();
 response.setContentType("video/mp4;charset=UTF-8"); 
 
 InputStream in = null;
 ServletOutputStream out = null;
 try { 
  out = response.getOutputStream();
  
  in = new FileInputStream(downloadFile);
  if(in !=null){
    byte[] b = new byte[1024];  
     int i = 0;  
     while((i = in.read(b)) > 0){  
    out.write(b, 0, i);  
     }  
     out.flush();   
     in.close(); 
   
  }
 } catch (Exception e) {
  
   e.printStackTrace();
 
 }finally{
  if(in != null) {  
   try { in.close(); } catch (IOException e) { }  
   in = null;  
  } 
  if(out != null) {  
   try { out.close(); } catch (IOException e) { }  
   out = null;  
  } 
 }
}

这种方式在PC端和Android手机上都能正常显示,但在IOS手机上通过Safari浏览器就不能播放。ios目前获取视频的时候请求头会带一个与断点续传有关的信息。对于ios来说,他不是一次性请求全部文件的,一般首先会请求0-1字节,这个会写在request header的"range"字段中:range:‘bytes=0-1’。
而服务端必须满足range的要求:解析range字段,然后按照range字段的要求返回对应的数据。

在响应头中response header至少要包含三个字段:

  • Content-Type:明确指定视频格式,有"video/mp4", “video/ogg”, "video/mov"等等。
  • Content-Range:格式是 “bytes <start>-<end>/<total>”,其中start和end必需对应request header里的range字段,total是文件总大小。
  • Content-Length:返回的二进制长度。

断点续传实现如下:

public void downRangeFile(File downloadFile, 
       HttpServletResponse response, 
       HttpServletRequest request) throws Exception {

 if (!downloadFile.exists()) {
  response.sendError(HttpServletResponse.SC_NOT_FOUND);
  return;
 }

 long fileLength = downloadFile.length();// 记录文件大小  
 long pastLength = 0;// 记录已下载文件大小  
 int rangeSwitch = 0;// 0:从头开始的全文下载;1:从某字节开始的下载(bytes=27000-);2:从某字节开始到某字节结束的下载(bytes=27000-39000)  
 long contentLength = 0;// 客户端请求的字节总量  
 String rangeBytes = "";// 记录客户端传来的形如“bytes=27000-”或者“bytes=27000-39000”的内容  
 RandomAccessFile raf = null;// 负责读取数据  
 OutputStream os = null;// 写出数据  
 OutputStream out = null;// 缓冲  
 int bsize = 1024;// 缓冲区大小  
 byte b[] = new byte[bsize];// 暂存容器  

 String range = request.getHeader("Range");
 int responseStatus = 206;
 if (range != null && range.trim().length() > 0 && !"null".equals(range)) {// 客户端请求的下载的文件块的开始字节  
  responseStatus = javax.servlet.http.HttpServletResponse.SC_PARTIAL_CONTENT;
  System.out.println("request.getHeader(\"Range\")=" + range);
  rangeBytes = range.replaceAll("bytes=", "");
  if (rangeBytes.endsWith("-")) {
   rangeSwitch = 1;
   rangeBytes = rangeBytes.substring(0, rangeBytes.indexOf('-'));
   pastLength = Long.parseLong(rangeBytes.trim());
   contentLength = fileLength - pastLength;
  } else {
   rangeSwitch = 2;
   String temp0 = rangeBytes.substring(0, rangeBytes.indexOf('-'));
   String temp2 = rangeBytes.substring(rangeBytes.indexOf('-') + 1, rangeBytes.length());
   pastLength = Long.parseLong(temp0.trim());
  }
 } else {
  contentLength = fileLength;// 客户端要求全文下载  
 }

 
 // 清除首部的空白行  
 response.reset();
 // 告诉客户端允许断点续传多线程连接下载,响应的格式是:Accept-Ranges: bytes  
 response.setHeader("Accept-Ranges", "bytes");
 // 如果是第一次下,还没有断点续传,状态是默认的 200,无需显式设置;响应的格式是:HTTP/1.1  

 if (rangeSwitch != 0) {
  response.setStatus(responseStatus);
  // 不是从最开始下载,断点下载响应号为206  
  // 响应的格式是:  
  // Content-Range: bytes [文件块的开始字节]-[文件的总大小 - 1]/[文件的总大小]  
  switch (rangeSwitch) {
   case 1: {
    String contentRange = new StringBuffer("bytes ")
      .append(new Long(pastLength).toString()).append("-")
      .append(new Long(fileLength - 1).toString())
      .append("/").append(new Long(fileLength).toString())
      .toString();
    response.setHeader("Content-Range", contentRange);
    break;
   }
   case 2: {
    String contentRange = range.replace("=", " ") + "/"
      + new Long(fileLength).toString();
    response.setHeader("Content-Range", contentRange);
    break;
   }
   default: {
    break;
   }
  }
 } else {
  String contentRange = new StringBuffer("bytes ").append("0-")
    .append(fileLength - 1).append("/").append(fileLength)
    .toString();
  response.setHeader("Content-Range", contentRange);
 }

 try {
  response.setContentType("video/mp4;charset=UTF-8"); 
  response.setHeader("Content-Length", String.valueOf(contentLength));
  os = response.getOutputStream();
  out = new BufferedOutputStream(os);
  raf = new RandomAccessFile(downloadFile, "r");
  try {
   long outLength = 0;// 实际输出字节数  
   switch (rangeSwitch) {
    case 0: {
    }
    case 1: {
     raf.seek(pastLength);
     int n = 0;
     while ((n = raf.read(b)) != -1) {
      out.write(b, 0, n);
      outLength += n;
     }
     break;
    }
    case 2: {
     raf.seek(pastLength);
     int n = 0;
     long readLength = 0;// 记录已读字节数  
     while (readLength <= contentLength - bsize) {// 大部分字节在这里读取  
      n = raf.read(b);
      readLength += n;
      out.write(b, 0, n);
      outLength += n;
     }
     if (readLength <= contentLength) {// 余下的不足 1024 个字节在这里读取  
      n = raf.read(b, 0, (int) (contentLength - readLength));
      out.write(b, 0, n);
      outLength += n;
     }
     break;
    }
    default: {
     break;
    }
   }
   System.out.println("Content-Length为:" + contentLength + ";实际输出字节数:" + outLength);
   out.flush();
  } catch (IOException ie) {
   // ignore  
  }
 } catch (Exception e) {
  e.printStackTrace();
 } finally {
  if (out != null) {
   try {
    out.close();
   } catch (IOException e) {
    e.printStackTrace();
   }
  }
  if (raf != null) {
   try {
    raf.close();
   } catch (IOException e) {
    e.printStackTrace();
   }
  }
 }
}

H5页面:

<!DOCTYPE HTML>
<html>
<body>


<video width="100%" height="200" rel="preload" x5-video-player-type="h5" playsinline="true" webkit-playsinline="true" controls="controls">
<source src="http://127.0.0.1:8080/XXX/getVideo.do?fileId=16" type="video/mp4">
</video>

</script>
</body>
</html>

通过上述断点续传方式H5可正常播放视频数据流,并且支持各种平台。

到此这篇关于Html5通过数据流方式播放视频的实现的文章就介绍到这了,更多相关Html5数据流播放视频内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
CSS3实现的3D隧道效果
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
css3 实现文字闪烁效果的三种方式示例代码
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
You might like
JAVA/JSP学习系列之六
2006/10/09 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
5分钟 Pipenv 上手指南
2018/12/20 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
个人求职信范文分享
2014/01/06 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
大型会议策划方案
2014/05/17 职场文书
企业法人授权委托书
2014/09/25 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
上班旷工检讨书
2015/08/15 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL