H5通过数据流方式播放视频
本文介绍如何通过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可正常播放视频数据流,并且支持各种平台。
H5通过数据流方式播放视频相关推荐
- html中视频代码字段,Html5通过数据流方式播放视频的实现
本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件,可以兼容PC.Android和IOS环境. H5页面可以通过 标签来播放视频.一般的方式如下: your browser does not ...
- html5上传mov视频播放,Html5通过数据流方式播放视频的实现
本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件,可以兼容PC.Android和IOS环境. H5页面可以通过 标签来播放视频.一般的方式如下: your browser does not ...
- 使用HLS协议连接nginx实现近实时流方式播放视频
文章目录 1. 流媒体 1.1 流式传输 1.1.2 顺序流式传输 1.1.3 实时流式传输 2. 点播 2.1 点播方案 2.2 什么是`HLS` 3. 视频编码 3.1 视频编码格式 3.2 `F ...
- ffmpeg解码H.264视频数据,MFC播放视频
ffmpeg 是一个完整的视频流解决方案,开源且有良好的跨平台性,ffmpeg具有强大的多媒体数据处理能力,能够实现视频的采集,多种视频格式间转换,给视频添加水印等多种功能,已被 VLC.Mplaye ...
- ckplayer支持html5播放吗,移动端(H5)环境中播放视频需要了解的内容-ckplayer使用方法...
移动端(H5)环境中播放视频需要了解的内容 虽然HTML5(下面简称:H5)的技术已整体趋于成熟,但在视频播放方面,如果跟pc端的flashplayer对比的话,功能就显的非常简单了.如果你决定要让你 ...
- 去除/屏蔽 安卓/Android手机的 qq浏览器 微信H5使用video标签播放视频,结束后的视频广告
今天是个好日子 老干妈炖大鹅的好日子 X5内核是腾讯基于优秀开源Webkit深度"优化并加工"的浏览器渲染引擎 微信和手机qq都是 还有一些就不细说了 x5内核会监管vid ...
- java与js交互视频_Android与H5交互—Java调用Js、Js调Java、H5页面调用Android播放视频...
content="ANZO,GAME,LOL,DNF,DOTA,撸啊撸,地下城与勇士,掌游宝,攻略,宝典,模拟器,加点,战报,英雄,最新,最全,最强,视频"> content ...
- 使用高德地图展示点位和信息窗体展示数据及播放视频
使用高德地图做了一个在地图展示点位,并通过点击,显示直播的功能,这个任务是为了之后大屏做准备. 这是一个能展示多个点标记,并在点击的时候弹出信息窗体,并在信息窗体中播放视频,且展示相关信息以及操作事件 ...
- IPhone微信H5用Video标签播放不了视频
H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#) 转载于:https://w ...
- 微信公众号网页 H5 video 标签自动播放
目录 微信公众号网页 H5 video 标签自动播放 问题描述 解决方案 微信公众号网页 H5 video 标签自动播放 环境:微信公众号网页 需求:H5 video 标签自动播放视频 video 标 ...
最新文章
- android evaluater_android – 带有test.R.java的Robolectric
- POJ 3449 Geometric Shapes
- apache启动报错记录
- 安卓键盘加上数字_Android自定义键盘的实现(数字键盘和字母键盘)
- C语言之获取32字节随机数的字符串
- JavaScript学习(三十七)—实现右键自定义菜单的功能
- flink globalwindow_《从0到1学习Flink》—— 介绍Flink中的Stream Windows
- VMware Converter迁移linux系统虚拟机
- AltiumDesigner06——常见晶振封装尺寸
- Android之ListView刷新某一项Item
- [1]Mpush架构图及源码分析
- CAN总线协议学习笔记
- jQuery实现鼠标滑过图片放大效果
- 统计学中数据分析方法汇总!
- Codeforces Edu Hacking
- Android EventLog含义
- 【Linux】exec()系列函数——execl(),execlp(),execle()等的区别
- 微信小程序实战篇-电商(一)
- 计算机网络Wireshark实验(西安交通大学)
- C# windowsService安装