Html5通过数据流方式播放视频的实现
程序员文章站
2022-06-18 19:02:52
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数据流播放视频内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
推荐阅读