关于前端:video标签在不同平台上的事件表现差异分析

5次阅读

共计 7088 个字符,预计需要花费 18 分钟才能阅读完成。

为了文章的完整性,首先还是列举一下 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() 事件持续播放 统一 统一

测试数据

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 版本无显著差别

正文完
 0