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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
CSS3实现的3D隧道效果
用CSS3画一个爱心
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
css3 实现文字闪烁效果的三种方式示例代码
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
javascript document.images实例
2008/05/27 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python循环语句之break与continue的用法
2015/10/14 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
python 实现识别图片上的数字
2019/07/30 Python
python如何实现word批量转HTML
2020/09/30 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
工作决心书范文
2014/03/11 职场文书
趣味运动会广播稿
2014/09/13 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
小学家长意见怎么写
2015/06/03 职场文书
初三毕业感言
2015/07/31 职场文书
2016大一新生军训感言
2015/12/08 职场文书
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers