本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件，可以兼容PC、And ROI d和IOS环境。
H5页面可以通过<video> 标签来播放视频。一般的方式如下：
<!DOCTY PE HT ML > <html> <body> <video src="/i/movie.mp4" controls="controls"> your br owser does not support the video tag </video> </body> </html>
src中指定了要播放的视频的URL，为具体的视频文件路径。当将访问请求变为getVideo.do?fil ei d=xxx 这种形式，服务端返回字节流的时候 后端 实现需要一些更改。
一般的方式是读本地文件然后写到response中，代码实现如下：
p ub lic void downFile(File downloa DF ile,
HttpServletResponse response,
HttpServletRequest request) t hr ows Exception {
response.reset();
response.setContentType("video/mp4;charset=UTF-8");
InputStre am 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.wr IT e(b, 0, i);
}
out.flush();
in.close();
}
} catch (Exception e) {
e. PR intStackTrace();
}finally{
if(in != null) {
try { in.close(); } catch (IOException e) { }
in = null;
}
if(out != null) {
try { out.close(); } catch (IOException e) { }
out = null;
}
}
}
这种方式 在P C端和Android手机上都能 正常 显示，但在IOS手机上通过Safari浏览器就不能播放。ios目前获取视频的时候请求头会带一个与断点续传有关的信息。对于ios来说，他不是一次性请求全部文件的，一般首先会请求0-1字节，这个会写在request header的"range"字段中：range:‘bytes=0-1’。
而服务端必须满足range的要求：解析range字段，然后按照range字段的要求返回对应的数据。
在响应头中response header至少要包含三个字段：
Content -t ype： 明确 指定 视频格式 ，有"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 response stat us = 206;
if (range != null && range.trim().length() > 0 &am p; & !"null".equals(range)) {// 客户端请求的下载的文件块的开始字节
responseStatus = javax.servlet.http.HttpServletResponse.SC_PARTIAL_CONTENT;
Sys tem.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 Buffe red OutputStream(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" play sinline="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数据流播放视频内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 Html5通过数据流方式播放视频的实现 全部内容，希望文章能够帮你解决 Html5通过数据流方式播放视频的实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Html5通过数据流方式播放视频的实现的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did211583