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

2024-11-2 22:31| 发布者: 284cc| 查看: 40| 评论: 0

摘要: 本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件，可以兼容PC、Android和IOS情况。 H5页面可以通过<video> 标签来播放视频。一般的方式如下： [code] <!DOCTYPE HTML> <html> <body> <video src="/i/

本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件，可以兼容PC、Android和IOS情况。

H5页面可以通过<video> 标签来播放视频。一般的方式如下：

[code] <!DOCTYPE HTML> <html> <body> <video src="/i/movie.mp4" controls="controls"> your browser does not support the video tag </video> </body> </html>[/code]

src中指定了要播放的视频的URL，为详细的视频文件路径。当将访问哀求变为getVideo.do?fileId=xxx 这种形式，服务端返回字节流的时候后端实现需要一些更改。

一般的方式是读本地文件然后写到response中，代码实现如下：

[code] 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; } } }[/code]

这种方式在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：返回的二进制长度。

断点续传实现如下：

[code] 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(); } } } }[/code]

H5页面：

[code] <!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> [/code]

通过上述断点续传方式H5可正常播放视频数据流，并且支持各种平台。

到此这篇关于Html5通过数据流方式播放视频的实现的文章就介绍到这了,更多干系Html5数据流播放视频内容请搜刮脚本之家以前的文章或继续浏览下面的干系文章，盼望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/773384.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：HTML5中 rem适配方案与 viewport 适配问题详解下一篇：html5中sharedWorker实现多页面通信的示例代码

账号		自动登录	找回密码
密码			立即注册

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

相关分类

站长推荐 /6