HTML5 video标签在不同平台上的事件表现差异分析

  • A+
所属分类:HTML5+CSS3

video标签属性和事件介绍

为了文章的完整性,首先还是列举一下video标签的属性:

  • src :视频的属性
  • poster:视频封面,没有播放时显示的图片
  • preload:预加载
  • autoplay:自动播放
  • loop:循环播放
  • controls:浏览器自带的控制条
  • width:视频宽度
  • height:视频高度

Video 对象属性:

  • audioTracks: 返回表示可用音频轨道的 AudioTrackList 对象。
  • autoplay: 设置或返回是否在就绪(加载完成)后随即播放视频。
  • buffered: 返回表示视频已缓冲部分的 TimeRanges 对象。
  • controller: 返回表示视频当前媒体控制器的 MediaController 对象。
  • controls: 设置或返回视频是否应该显示控件(比如播放/暂停等)。
  • crossOrigin: 设置或返回视频的 CORS 设置。
  • currentSrc: 返回当前视频的 URL。
  • currentTime: 设置或返回视频中的当前播放位置(以秒计)。
  • defaultMuted: 设置或返回视频默认是否静音。
  • defaultPlaybackRate: 设置或返回视频的默认播放速度。
  • duration: 返回视频的长度(以秒计)。
  • ended: 返回视频的播放是否已结束。
  • error: 返回表示视频错误状态的 MediaError 对象。
  • height: 设置或返回视频的 height 属性的值。
  • loop:设置或返回视频是否应在结束时再次播放。
  • mediaGroup: 设置或返回视频所属媒介组合的名称。
  • muted: 设置或返回是否关闭声音。
  • networkState: 返回视频的当前网络状态。
  • paused: 设置或返回视频是否暂停。
  • playbackRate: 设置或返回视频播放的速度。
  • played: 返回表示视频已播放部分的 TimeRanges 对象。
  • poster: 设置或返回视频的 poster 属性的值。
  • preload: 设置或返回视频的 preload 属性的值。
  • readyState: 返回视频当前的就绪状态。
  • seekable: 返回表示视频可寻址部分的 TimeRanges 对象。
  • seeking: 返回用户当前是否正在视频中进行查找。
  • src: 设置或返回视频的 src 属性的值。
  • startDate: 返回表示当前时间偏移的 Date 对象。
  • textTracks: 返回表示可用文本轨道的 TextTrackList 对象。
  • videoTracks: 返回表示可用视频轨道的 VideoTrackList 对象。
  • volume: 设置或返回视频的音量。
  • width :设置或返回视频的 width 属性的值。

Video 对象方法:

  • addTextTrack(): 向视频添加新的文本轨道。
  • canPlayType(): 检查浏览器是否能够播放指定的视频类型。
  • load(): 重新加载视频元素。
  • play(): 开始播放视频。
  • pause(): 暂停当前播放的视频。

然后列出可以用于视频状态监控的Media 事件(由媒介(比如视频、图像和音频)触发的事件,适用于所有html元素,但常用于 audio、embed、img、object 以及 video中):

属性描述
onabortscript在退出时运行的脚本
oncanplayscript当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)
oncanplaythroughscript当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本
ondurationchangescript当媒介长度改变时运行的脚本
onemptiedscript当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)
onendedscript当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)
onerrorscript当在文件加载期间发生错误时运行的脚本
onloadeddatascript当媒介数据已加载时运行的脚本
onloadedmetadatascript当元数据(比如分辨率和时长)被加载时运行的脚本
onloadstartscript在文件开始加载且未实际加载任何数据前运行的脚本
onpausescript当媒介被用户或程序暂停时运行的脚本
onplayscript当媒介已就绪可以开始播放时运行的脚本
onplayingscript当媒介已开始播放时运行的脚本
onprogressscript当浏览器正在获取媒介数据时运行的脚本
onratechangescript每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)
onreadystatechangescript每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)
onseekedscript当 seeking 属性设置为 false(指示定位已结束)时运行的脚本
onseekingscript当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本
onstalledscript在浏览器不论何种原因未能取回媒介数据时运行的脚本
onsuspendscript在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本
ontimeupdatescript当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本
onvolumechangescript每当音量改变时(包括将音量设置为静音)时运行的脚本
onwaitingscript当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本

这些Media 事件在不同平台下表现各异,事件触发的场景有差异,事件触发后Video对象属性的返回值也不尽相同,下面重点归纳其差异点,首先我们会给出结论,然后附上测试数据。 测试直接使用最简单的方式,在页面上添加video标签播放视频,视频设置循环播放属性loop。


差异分析结论

事件属性表现差异

eventpc侧iOSandroid
loadstart文件加载,video初始化,未加载任何数据与PC侧一致一致
stalled视频没有播放,没有取回任何媒介数据:一般是由于网络状况不佳,导致视频下载中断一致可能在play()事件触发前
playplay()事件触发,状态是开始播放,但视频并未真正开始播放一致一致
waitingplay()事件触发后,等待数据一致一致
durationchange获取到视频长度,duration属性能获得真实视频长度一致可能在play()事件触发前,可能没有获取到真实的视频长度:可能触发多次, 只有最后一次才能获取到真实的duration,之前的值有可能为0或者1
loadedmetadataplay()事件触发后,获取到元数据一致play()事件触发前,没有获取到真实的元数据
loadeddataplay()事件触发后,获取到媒介数据一致play()事件触发前,没有获取到真实的媒介数据
canplay可以播放,但视频可能还未真正开始播放,并且中途可能因为加载而暂停一致一致
playing视频开始播放一致可能还未真正开始播放,并且可能还未获取到视频长度
canplaythrough视频开始播放后,可以流畅播放一致数据可能还没有开始加载,视频可能还未开始播放, 视频仍然会卡住
timeupdate视频播放后,更新播放进度, 会有明确的进度变化,可以获取到currentTime一致第一次可能会有误差,如果 timeupdate事件的currentTime发生变化,代表视频一定开始播放
progress视频播放后,持续下载, 可以获取到当前的缓存buffer,并且全部下载完毕后不再触发一致第一次可能会有误差, 全部下载完毕后依然继续触发
suspend缓冲中,视频可能卡顿也可能在流畅播放中,全部缓存完毕后不再触发。视频还未真实播放前,pause()事件会触发suspend一致一致
pause可能是响应pause()事件暂停,或者是切出页面自动暂停一致一致
seeking拖动进度条时,寻找播放位置。或者播放完毕,寻找下一个视频一致一致
seeked拖动进度条时,定位到播放位置。或者开始播放下一个视频,或者是从头开始循环播放一致一致
error错误,无法定位错误原因,无法通过paly()事件继续播放一致一致

视频监控结论

首先重点介绍video对象的buffered属性:

buffered返回 TimeRanges 对象,TimeRanges 对象表示用户已缓冲音视频的时间范围,如果用户在音视频中跳跃播放,会得到多个缓冲范围。这里要强调的是如果跳跃播放,得到的多个缓冲范围是按照大小顺序排列,无重复覆盖的

|

目前可以监控的事件有以下几点:

1、 视频加载时间

play事件触发时间 至 timeupdate事件第一次currentTime 属性值发生变化时,在加载过程中可用suspend判断是否有手动暂停。

2、 视频缓冲次数

video对象的buffered属性返回表示视频已缓冲部分的 TimeRanges 对象,currentTime属性设置或返回视频中的当前播放位置(以秒计),利用缓冲区的变化可以记录视频缓冲次数。 目前尝试的缓冲判断为: timeupdate事件中,currentTime 超出 buffered的记录范围。

3、 视频流中断

引起视频停止播放的原因有:手动暂停、视频流中断、视频播放完毕,切换程序,所以用视频停止播放来判断断流不准确。 要尽可能的实时监控视频流是否中断,目前还是尝试使用video对象的buffered属性, 因为视频断流意味着buffered缓冲区不会再发生变化。 视频流中断判断可表述为: timeupdate事件中,currentTime所在的缓冲buffered段的尾部时间,不等于视频的总长度duration, 且连续多次没有变化。具体使用连续多少次作为阈值,需要反复测试,目前所得结论是20次。


测试数据

pc侧chrome

#eventreadyStatecurrentTime (s)buffered (s)duration (s)视频状态
1loadstartNOTHING0nullNaN准备请求数据(初始化完毕)
2stalledNOTHING0nullNaN
3playNOTHING0nullNaNplay()事件触发,状态是开始播放,但视频并未真正开始播放
4waitingNOTHING0nullNaN等待数据
5durationchangeMETADATA00.644.2获取到视频长度
6loadedmetadataMETADATA00.644.2获取到元数据
7loadeddataENOUGH_DATA01.0644.2
8canplayENOUGH_DATA01.0644.2可以播放,但中途可能因为加载而暂停
9playingENOUGH_DATA01.0644.2开始播放
10canplaythroughENOUGH_DATA01.0644.2可以流畅播放
11timeupdateENOUGH_DATA01.0644.2播放进度变化
12progressENOUGH_DATA0.12.9244.2持续下载
13timeupdateENOUGH_DATA0.214.6744.2播放进度变化
...
38suspendENOUGH_DATA3.2914.0844.2缓冲中,视频可能卡顿也可能在流畅播放中
39timeupdateENOUGH_DATA3.4814.0844.2
...
490timeupdateENOUGH_DATA39.744.244.2
491pauseENOUGH_DATA39.8744.244.2手动暂停
492playENOUGH_DATA39.8744.244.2play()事件触发
493playingENOUGH_DATA40.0644.244.2
494timeupdateENOUGH_DATA40.2444.244.2
...
509timeupdateENOUGH_DATA43.9944.244.2
510timeupdateMETADATA044.244.2播放完毕
511seekingMETADATA044.244.2寻找中
512waitingMETADATA044.244.2
513progressMETADATA044.244.2
514timeupdateENOUGH_DATA044.244.2
515seekedENOUGH_DATA0.0544.244.2播放完毕进度回到起点循环播放
516canplayENOUGH_DATA0.2544.244.2
...
802timeupdateENOUGH_DATA23.4644.244.2
803errorENOUGH_DATA044.244.2网络断开错误
804timeupdateENOUGH_DATA044.244.2无法继续播放

iOS

iOS weixin

#eventreadyStatecurrentTime (s)buffered (s)duration (s)视频状态
1loadstartNOTHING0nullNaN准备请求数据(初始化完毕)
2playNOTHING0nullNaN状态是开始播放,但视频并未真正开始播放
3waitingNOTHING0nullNaN等待数据
4durationchangeMETADATA07.6344.2获取到视频长度
5loadedmetadataMETADATA07.6344.2获取到元数据
6loadeddataENOUGH_DATA07.6344.2
7canplayENOUGH_DATA07.6344.2可以播放,但中途可能因为加载而暂停
8canplaythroughENOUGH_DATA07.6344.2可以流畅播放
9playingENOUGH_DATA07.6344.2开始播放
10timeupdateENOUGH_DATA07.6344.2播放进度变化
11timeupdateENOUGH_DATA0.257.6344.2
...
22timeupdateENOUGH_DATA3.0136.2444.2
23progressENOUGH_DATA3.1544.244.2持续下载
24suspendENOUGH_DATA3.1644.244.2
25timeupdateENOUGH_DATA3.2644.244.2
...
39pauseENOUGH_DATA6.4744.244.2手动暂停
40playENOUGH_DATA6.5144.244.2
41playingENOUGH_DATA6.544.244.2
42timeupdateENOUGH_DATA6.7244.244.2
...
61timeupdateENOUGH_DATA11.444.244.2
62pauseENOUGH_DATA11.444.244.2网络环境切换,自动触发
63playENOUGH_DATA11.3844.244.2
64playingENOUGH_DATA11.4144.244.2
65timeupdateENOUGH_DATA11.644.244.2
...
198timeupdateENOUGH_DATA44.1544.244.2
199timeupdateENOUGH_DATA044.244.2播放完毕
200seekingENOUGH_DATA044.244.2寻找中
201timeupdateENOUGH_DATA0.144.244.2
202seekedENOUGH_DATA0.244.244.2播放完毕进度回到起点循环播放
203timeupdateENOUGH_DATA0.3744.244.2

iOS QQ

与微信无明显差异

iOS safari

与微信无明显差异

iOS QQ浏览器 x5内核

#eventreadyStatecurrentTime (s)buffered (s)duration (s)视频状态
1loadstartNOTHING0nullNaN准备请求数据(初始化完毕)
2progressMETADATA0null44.2
3suspendMETADATA0null44.2
4durationchangeMETADATA0null44.2
5loadedmetadataMETADATA0null44.2未触发play()事件之前,自动触发以上事件
6timeupdateMETADATA0null44.2触发play()事件,开始播放
7timeupdateMETADATA0null44.2
8timeupdateMETADATA0null44.2

在QQ浏览器中除了可以获取视频长度,其他属性均无法获取。鉴于其表现比较诡异,我们的对比中除开此特例。

android--三星GT-N7105 4.4.2

android weixin

#eventreadyStatecurrentTime (s)buffered (s)duration (s)视频状态
1loadstartCURRENT_DATA0null1准备请求数据(初始化完毕)
2durationchangeCURRENT_DATA0null1
3loadedmetadataCURRENT_DATA0null1
4loadeddataCURRENT_DATA0null1
5stalledCURRENT_DATA0null1未触发play()事件之前,自动触发以上事件
6playENOUGH_DATA0null1触发play()事件,开始播放,但视频可能并未立刻开始播放
7waitingENOUGH_DATA0null1
8canplayENOUGH_DATA0null1可能因为加载而卡顿
9canplaythroughENOUGH_DATA0null1
10playingENOUGH_DATA0null1
11timeupdateENOUGH_DATA0null1
12progressENOUGH_DATA0null1
13durationchangeENOUGH_DATA0null44.2
14playingENOUGH_DATA0null44.2视频真正开始播放
15timeupdateENOUGH_DATA0.04null44.2
...
90timeupdateENOUGH_DATA17.2944.244.2
91pauseENOUGH_DATA17.2944.244.2
92playENOUGH_DATA17.2944.244.2
93playingENOUGH_DATA17.2944.244.2
94timeupdateENOUGH_DATA18.7544.244.2
...
196timeupdateENOUGH_DATA044.244.2
197seekingENOUGH_DATA044.244.2
198timeupdateENOUGH_DATA044.244.2
199pauseENOUGH_DATA044.244.2无法自动循环播放

android QQ

与微信无明显差异

android QQ浏览器

与微信无明显差异

android--华为G610-U00 4.2.1

与三星GT-N7105 4.4.2 weixin版本无明显差异

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: