您现在的位置是:网站首页> 编程资料编程资料
Html5通过数据流方式播放视频的实现HTML5 播放 RTSP 视频的实例代码html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2021-08-30
1417人已围观
简介 这篇文章主要介绍了Html5通过数据流方式播放视频的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件,可以兼容PC、Android和IOS环境。
H5页面可以通过
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必需对应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页面:
通过上述断点续传方式H5可正常播放视频数据流,并且支持各种平台。
到此这篇关于Html5通过数据流方式播放视频的实现的文章就介绍到这了,更多相关Html5数据流播放视频内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
相关内容
- HTML5中 rem适配方案与 viewport 适配问题详解Html5移动端网页端适配(js+rem)详解html5页面 rem 布局适配方法html5中JavaScript removeChild 删除所有节点
- HTML5轮播图全代码纯HTML和CSS实现JD轮播图效果
- HTML+CSS+JS实现图片的瀑布流布局的示例代码3种方式实现瀑布流布局小结小程序瀑布流解决左右两边高度差距过大的问题css3 column实现卡片瀑布流布局的示例代码HTML5 canvas 瀑布流文字效果的示例代码用CSS3实现瀑布流布局的示例代码CSS3实现瀑布流布局与无限加载图片相册的实例代码CSS3使用多列制作瀑布流css和js实现瀑布流效果示例HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
- html+css+jquery模仿搜索风云榜选项卡效果有截图html5使用html2canvas实现浏览器截图的示例HTML5+CSS3模仿优酷视频截图功能示例canvas与html5实现视频截图功能示例Html5新特性用canvas标签画多条直线附效果截图HTML5在canvas中绘制复杂形状附效果截图HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)使用HTML截图并保存为本地图片的实现代码
- html+css+javascript实现列表循环滚动示例代码利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端) 用CSS3实现无限循环的无缝滚动的实例代码
- textarea文本域宽度和高度width及height自动适应实现代码如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度div模拟textarea文本域实现高度自适应效果代码css textarea 高度自适应,无滚动条做一个能自适应高度的textarea的示例代码
- HTML中div与span的区别(共同点与不同点)关于div中img,span垂直居中的问题深入理解DIV和SPAN的区别浅谈Span和Div的区别div与span的区别和使用示例DIV和SPAN垂直居中对齐的实现方法div与span之间有什么区别html的基本使用包括链接、样式表、span和div等等区别div和span、relative和absolute、display和visibilityHTML中div和span比较_动力节点Java学院整理
- HTML仿命令行界面具体实现纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 谈谈html转义字符如何通过代码识别在线HTML转义/反转义工具HTML/XML转义字符对照表HTML字符实体(Character Entities) 转义字符串(Escape Sequence)最常用的HTML转义字符 Escape Sequencehtml中常用的转义字符总结
- a标签中写有文字并有图片如何隐藏文字只显示图片纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
