如何在Html5使用數(shù)據(jù)流播放視頻？案例代碼分享！

牛奶煮蘿莉 2021-08-18 14:33:11 瀏覽數(shù) (5468)

反饋

對于各種綜藝節(jié)目和電視劇想必很多小伙伴們都沒有落下自己喜歡的內(nèi)容，那么今天我們就來談?wù)動(dòng)嘘P(guān)于：“如何在Html5使用數(shù)據(jù)流播放視頻？”這個(gè)問題的解決方法！

H5頁面可以通過<video> 標(biāo)簽來播放視頻。一般的方式如下：

<!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)將訪問請求變?yōu)間etVideo.do?fileId=xxx 這種形式，服務(wù)端返回字節(jié)流的時(shí)候后端實(shí)現(xiàn)需要一些更改。

一般的方式是讀本地文件然后寫到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ī)上通過Safari瀏覽器就不能播放。ios目前獲取視頻的時(shí)候請求頭會(huì)帶一個(gè)與斷點(diǎn)續(xù)傳有關(guān)的信息。對于ios來說，他不是一次性請求全部文件的，一般首先會(huì)請求0-1字節(jié)，這個(gè)會(huì)寫在request header的"range"字段中：range:‘bytes=0-1’。
而服務(wù)端必須滿足range的要求：解析range字段，然后按照range字段的要求返回對應(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必需對應(yīng)request header里的range字段，total是文件總大小。
Content-Length：返回的二進(jìn)制長度。

斷點(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：從頭開始的全文下載；1：從某字節(jié)開始的下載（bytes=27000-）；2：從某字節(jié)開始到某字節(jié)結(jié)束的下載（bytes=27000-39000）  
 long contentLength = 0;// 客戶端請求的字節(jié)總量  
 String rangeBytes = "";// 記錄客戶端傳來的形如“bytes=27000-”或者“bytes=27000-39000”的內(nèi)容  
 RandomAccessFile raf = null;// 負(fù)責(zé)讀取數(shù)據(jù)  
 OutputStream os = null;// 寫出數(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)) {// 客戶端請求的下載的文件塊的開始字節(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");
 // 如果是第一次下,還沒有斷點(diǎn)續(xù)傳,狀態(tài)是默認(rèn)的 200,無需顯式設(shè)置;響應(yīng)的格式是:HTTP/1.1  

 if (rangeSwitch != 0) {
  response.setStatus(responseStatus);
  // 不是從最開始下載，斷點(diǎn)下載響應(yīng)號為206  
  // 響應(yīng)的格式是:  
  // Content-Range: bytes [文件塊的開始字節(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頁面：

<!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>

通過上述斷點(diǎn)續(xù)傳方式H5可正常播放視頻數(shù)據(jù)流，并且支持各種平臺(tái)。

通過文章中的步驟和代碼我們對于：“如何在Html5使用數(shù)據(jù)流播放視頻？”這個(gè)問題想必大家有了不少的了解，更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool學(xué)習(xí)自己想要的內(nèi)容！

HTML5

0 人點(diǎn)贊

如何在Html5使用數(shù)據(jù)流播放視頻？案例代碼分享！

如何在Html5使用數(shù)據(jù)流播放視頻？案例代碼分享！