Html5通过数据流方式播放视频的实现

程序员文章站 2022-03-04 09:53:02

Html5通过数据流方式播放视频的实现这篇文章主要介绍了Html5通过数据流方式播放视频的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧... 21-04-27...

本文介绍如何通过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数据流播放视频内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

相关标签： HTML5 数据流播放视频

上一篇： HTML5中 rem适配方案与 viewport 适配问题详解

下一篇： HTML5 drag和drop具体使用详解

Html5通过数据流方式播放视频的实现

HTML5页面音视频在微信和app下自动播放的实现方法

Android如何让WebView中的HTML5页面实现视频全屏播放

HTML5页面音视频在微信和app下自动播放的实现方法

Android如何让WebView中的HTML5页面实现视频全屏播放

html5视频自动横过来自适应页面且点击播放功能的实现

HTML5 通过Vedio标签实现视频循环播放的示例代码

Html5通过数据流方式播放视频的实现

HTML5页面音频自动播放的实现方式

javascript实现简单的html5视频播放器_javascript技巧

javascript实现简单的html5视频播放器_javascript技巧