本文介紹如何通過(guò)H5頁(yè)面通過(guò)數(shù)據(jù)流的方式播放服務(wù)端的視頻文件，可以兼容PC、Android和IOS環(huán)境。
H5頁(yè)面可以通過(guò)<video> 標(biāo)簽來(lái)播放視頻。一般的方式如下：
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.mp4" controls="controls">
your browser does not support the video tag
</video>
</body>
</html>
src中指定了要播放的視頻的URL，為具體的視頻文件路徑。當(dāng)將訪問(wèn)請(qǐng)求變?yōu)間etVideo.do?fileId=xxx 這種形式，服務(wù)端返回字節(jié)流的時(shí)候后端實(shí)現(xiàn)需要一些更改。
一般的方式是讀本地文件然后寫(xiě)到response中，代碼實(shí)現(xiàn)如下：
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手機(jī)上都能正常顯示，但在IOS手機(jī)上通過(guò)Safari瀏覽器就不能播放。ios目前獲取視頻的時(shí)候請(qǐng)求頭會(huì)帶一個(gè)與斷點(diǎn)續(xù)傳有關(guān)的信息。對(duì)于ios來(lái)說(shuō)，他不是一次性請(qǐng)求全部文件的，一般首先會(huì)請(qǐng)求0-1字節(jié)，這個(gè)會(huì)寫(xiě)在request header的"range"字段中：range:‘bytes=0-1’。
而服務(wù)端必須滿足range的要求：解析range字段，然后按照range字段的要求返回對(duì)應(yīng)的數(shù)據(jù)。
在響應(yīng)頭中response header至少要包含三個(gè)字段：
- Content-Type：明確指定視頻格式，有"video/mp4", “video/ogg”, "video/mov"等等。
- Content-Range：格式是 “bytes <start>-<end>/<total>”，其中start和end必需對(duì)應(yīng)request header里的range字段，total是文件總大小。
- Content-Length：返回的二進(jìn)制長(zhǎng)度。
斷點(diǎn)續(xù)傳實(shí)現(xiàn)如下：
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：從頭開(kāi)始的全文下載；1：從某字節(jié)開(kāi)始的下載（bytes=27000-）；2：從某字節(jié)開(kāi)始到某字節(jié)結(jié)束的下載（bytes=27000-39000）
long contentLength = 0;// 客戶端請(qǐng)求的字節(jié)總量
String rangeBytes = "";// 記錄客戶端傳來(lái)的形如“bytes=27000-”或者“bytes=27000-39000”的內(nèi)容
RandomAccessFile raf = null;// 負(fù)責(zé)讀取數(shù)據(jù)
OutputStream os = null;// 寫(xiě)出數(shù)據(jù)
OutputStream out = null;// 緩沖
int bsize = 1024;// 緩沖區(qū)大小
byte b[] = new byte[bsize];// 暫存容器
String range = request.getHeader("Range");
int responseStatus = 206;
if (range != null && range.trim().length() > 0 && !"null".equals(range)) {// 客戶端請(qǐng)求的下載的文件塊的開(kāi)始字節(jié)
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();
// 告訴客戶端允許斷點(diǎn)續(xù)傳多線程連接下載,響應(yīng)的格式是:Accept-Ranges: bytes
response.setHeader("Accept-Ranges", "bytes");
// 如果是第一次下,還沒(méi)有斷點(diǎn)續(xù)傳,狀態(tài)是默認(rèn)的 200,無(wú)需顯式設(shè)置;響應(yīng)的格式是:HTTP/1.1
if (rangeSwitch != 0) {
response.setStatus(responseStatus);
// 不是從最開(kāi)始下載，斷點(diǎn)下載響應(yīng)號(hào)為206
// 響應(yīng)的格式是:
// Content-Range: bytes [文件塊的開(kāi)始字節(jié)]-[文件的總大小 - 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;// 實(shí)際輸出字節(jié)數(shù)
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;// 記錄已讀字節(jié)數(shù)
while (readLength <= contentLength - bsize) {// 大部分字節(jié)在這里讀取
n = raf.read(b);
readLength += n;
out.write(b, 0, n);
outLength += n;
}
if (readLength <= contentLength) {// 余下的不足 1024 個(gè)字節(jié)在這里讀取
n = raf.read(b, 0, (int) (contentLength - readLength));
out.write(b, 0, n);
outLength += n;
}
break;
}
default: {
break;
}
}
System.out.println("Content-Length為：" + contentLength + "；實(shí)際輸出字節(jié)數(shù)：" + 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頁(yè)面：
<!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>
通過(guò)上述斷點(diǎn)續(xù)傳方式H5可正常播放視頻數(shù)據(jù)流，并且支持各種平臺(tái)。
到此這篇關(guān)于Html5通過(guò)數(shù)據(jù)流方式播放視頻的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Html5數(shù)據(jù)流播放視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
