h5的video标签播放视频时，如何每秒的获取到视频的播放速度呢？

来源：蜘蛛抓取(WebSpider) 时间：2017-08-02 08:10 标签： h5新增的标签

电脑端和手机端都可以用： //webm视频格式是稳定支持的格式工厂提前转码

设置好标签还要初始化一下视频屏幕大小，可以参考： 

js获取手机屏幕宽度、高度
 
视频加载之后先获取总时长要用到video的一个事件-loadedmetadata，这个事件的触发表示元数据（媒体的一些基本信息）已经加载完成
 

 


 


 


 


 


 
 
设置断点续播:需要监听一个事件和获取一个属性的值，那么用到的是video的timeupdate事件和currentTime属性

进度控制禁止随意快进：

//当目前的播放位置已更改时 （禁止随意快进）

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

H5页面可以通过 


 

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


 

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

这种方式在PC端和Android手机上都能正常显示但在IOS手机上通过Safari浏览器就不能播放。ios目前获取视频的时候请求头会带一个与断点續传有关的信息对于ios来说，他不是一次性请求全部文件的一般首先会请求0-1字节，这个会写在request header的"range"字段中：range:‘bytes=0-1’
而服务端必须满足range的要求：解析range字段，然后按照range字段的要求返回对应的数据

// 清除首部的空白行 // 如果是第一次下,还没有断点续传,状态是默认的 200,无需显式设置;响应嘚格式是:HTTP/1.1 // 不是从最开始下载，断点下载响应号为206

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

我要回帖

更多关于 h5新增的标签 的文章

 

随机推荐