乐趣区

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

jiezi

为了文章的完整性，首先还是列举一下 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 中）：

属性 值 形容
onabort script 在退出时运行的脚本
oncanplay script 当文件就绪能够开始播放时运行的脚本（缓冲已足够开始时）
oncanplaythrough script 当媒介可能无需因缓冲而进行即可播放至结尾时运行的脚本
ondurationchange script 当媒介长度扭转时运行的脚本
onemptied script 当产生故障并且文件忽然不可用时运行的脚本（比方连贯意外断开时）
onended script 当媒介已达到结尾时运行的脚本（可发送相似“感激观看”之类的音讯）
onerror script 当在文件加载期间产生谬误时运行的脚本
onloadeddata script 当媒介数据已加载时运行的脚本
onloadedmetadata script 当元数据（比方分辨率和时长）被加载时运行的脚本
onloadstart script 在文件开始加载且未理论加载任何数据前运行的脚本
onpause script 当媒介被用户或程序暂停时运行的脚本
onplay script 当媒介已就绪能够开始播放时运行的脚本
onplaying script 当媒介已开始播放时运行的脚本
onprogress script 当浏览器正在获取媒介数据时运行的脚本
onratechange script 每当回放速率扭转时运行的脚本（比方当用户切换到慢动作或快进模式）
onreadystatechange script 每当就绪状态扭转时运行的脚本（就绪状态监测媒介数据的状态）
onseeked script 当 seeking 属性设置为 false（批示定位已完结）时运行的脚本
onseeking script 当 seeking 属性设置为 true（批示定位是流动的）时运行的脚本
onstalled script 在浏览器不管何种起因未能取回媒介数据时运行的脚本
onsuspend script 在媒介数据齐全加载之前不管何种起因终止取回媒介数据时运行的脚本
ontimeupdate script 当播放地位扭转时（比方当用户快进到媒介中一个不同的地位时）运行的脚本
onvolumechange script 每当音量扭转时（包含将音量设置为静音）时运行的脚本
onwaiting script 当媒介已进行播放但打算持续播放时（比方当媒介暂停已缓冲更多数据）运行脚本
这些 Media 事件在不同平台下体现各异，事件触发的场景有差别，事件触发后 Video 对象属性的返回值也不尽相同，上面重点演绎其差别点，首先咱们会给出论断，而后附上测试数据。测试间接应用最简略的形式，在页面上增加 video 标签播放视频，视频设置循环播放属性 loop。

差别剖析论断

事件属性体现差别

event pc 侧 iOS android
loadstart 文件加载，video 初始化，未加载任何数据 与 PC 侧统一 统一
stalled 视频没有播放，没有取回任何媒介数据：个别是因为网络状况不佳，导致视频下载中断 统一 可能在 play() 事件触发前
play play() 事件触发，状态是开始播放，但视频并未真正开始播放 统一 统一
waiting play() 事件触发后，期待数据 统一 统一
durationchange 获取到视频长度，duration 属性能取得实在视频长度 统一 可能在 play() 事件触发前，可能没有获取到实在的视频长度：可能触发屡次，只有最初一次能力获取到实在的 duration，之前的值有可能为 0 或者 1
loadedmetadata play() 事件触发后，获取到元数据 统一 play() 事件触发前，没有获取到实在的元数据
loadeddata play() 事件触发后，获取到媒介数据 统一 play() 事件触发前，没有获取到实在的媒介数据
canplay 能够播放，但视频可能还未真正开始播放，并且中途可能因为加载而暂停 统一 统一
playing 视频开始播放 统一 可能还未真正开始播放，并且可能还未获取到视频长度
canplaythrough 视频开始播放后，能够晦涩播放 统一 数据可能还没有开始加载，视频可能还未开始播放，视频依然会卡住
timeupdate 视频播放后，更新播放进度，会有明确的进度变动，能够获取到 currentTime 统一 第一次可能会有误差，如果 timeupdate 事件的 currentTime 发生变化，代表视频肯定开始播放
progress 视频播放后，继续下载，能够获取到以后的缓存 buffer，并且全副下载结束后不再触发 统一 第一次可能会有误差，全副下载结束后仍然持续触发
suspend 缓冲中，视频可能卡顿也可能在晦涩播放中，全副缓存结束后不再触发。视频还未实在播放前，pause() 事件会触发 suspend 统一 统一
pause 可能是响应 pause() 事件暂停，或者是切出页面主动暂停 统一 统一
seeking 拖动进度条时，寻找播放地位。或者播放结束，寻找下一个视频 统一 统一
seeked 拖动进度条时，定位到播放地位。或者开始播放下一个视频，或者是从头开始循环播放 统一 统一
error 谬误，无奈定位谬误起因，无奈通过 paly() 事件持续播放 统一 统一

测试数据

pc 测试 chrome

# event readyState currentTime (s) buffered (s) duration (s) 视频状态
1 loadstart NOTHING 0 null NaN 筹备申请数据（初始化结束）
2 stalled NOTHING 0 null NaN
3 play NOTHING 0 null NaN play() 事件触发，状态是开始播放，但视频并未真正开始播放
4 waiting NOTHING 0 null NaN 期待数据
5 durationchange METADATA 0 0.6 44.2 获取到视频长度
6 loadedmetadata METADATA 0 0.6 44.2 获取到元数据
7 loadeddata ENOUGH_DATA 0 1.06 44.2
8 canplay ENOUGH_DATA 0 1.06 44.2 能够播放，但中途可能因为加载而暂停
9 playing ENOUGH_DATA 0 1.06 44.2 开始播放
10 canplaythrough ENOUGH_DATA 0 1.06 44.2 能够晦涩播放
11 timeupdate ENOUGH_DATA 0 1.06 44.2 播放进度变动
12 progress ENOUGH_DATA 0.1 2.92 44.2 继续下载
13 timeupdate ENOUGH_DATA 0.21 4.67 44.2 播放进度变动
…
38 suspend ENOUGH_DATA 3.29 14.08 44.2 缓冲中，视频可能卡顿也可能在晦涩播放中
39 timeupdate ENOUGH_DATA 3.48 14.08 44.2
…
490 timeupdate ENOUGH_DATA 39.7 44.2 44.2
491 pause ENOUGH_DATA 39.87 44.2 44.2 手动暂停
492 play ENOUGH_DATA 39.87 44.2 44.2 play() 事件触发
493 playing ENOUGH_DATA 40.06 44.2 44.2
494 timeupdate ENOUGH_DATA 40.24 44.2 44.2
…
509 timeupdate ENOUGH_DATA 43.99 44.2 44.2
510 timeupdate METADATA 0 44.2 44.2 播放结束
511 seeking METADATA 0 44.2 44.2 寻找中
512 waiting METADATA 0 44.2 44.2
513 progress METADATA 0 44.2 44.2
514 timeupdate ENOUGH_DATA 0 44.2 44.2
515 seeked ENOUGH_DATA 0.05 44.2 44.2 播放结束进度回到终点循环播放
516 canplay ENOUGH_DATA 0.25 44.2 44.2
…
802 timeupdate ENOUGH_DATA 23.46 44.2 44.2
803 error ENOUGH_DATA 0 44.2 44.2 网络断开谬误
804 timeupdate ENOUGH_DATA 0 44.2 44.2 无奈持续播放

iOS

iOS weixin

# event readyState currentTime (s) buffered (s) duration (s) 视频状态
1 loadstart NOTHING 0 null NaN 筹备申请数据（初始化结束）
2 play NOTHING 0 null NaN 状态是开始播放，但视频并未真正开始播放
3 waiting NOTHING 0 null NaN 期待数据
4 durationchange METADATA 0 7.63 44.2 获取到视频长度
5 loadedmetadata METADATA 0 7.63 44.2 获取到元数据
6 loadeddata ENOUGH_DATA 0 7.63 44.2
7 canplay ENOUGH_DATA 0 7.63 44.2 能够播放，但中途可能因为加载而暂停
8 canplaythrough ENOUGH_DATA 0 7.63 44.2 能够晦涩播放
9 playing ENOUGH_DATA 0 7.63 44.2 开始播放
10 timeupdate ENOUGH_DATA 0 7.63 44.2 播放进度变动
11 timeupdate ENOUGH_DATA 0.25 7.63 44.2
…
22 timeupdate ENOUGH_DATA 3.01 36.24 44.2
23 progress ENOUGH_DATA 3.15 44.2 44.2 继续下载
24 suspend ENOUGH_DATA 3.16 44.2 44.2
25 timeupdate ENOUGH_DATA 3.26 44.2 44.2
…
39 pause ENOUGH_DATA 6.47 44.2 44.2 手动暂停
40 play ENOUGH_DATA 6.51 44.2 44.2
41 playing ENOUGH_DATA 6.5 44.2 44.2
42 timeupdate ENOUGH_DATA 6.72 44.2 44.2
…
61 timeupdate ENOUGH_DATA 11.4 44.2 44.2
62 pause ENOUGH_DATA 11.4 44.2 44.2 网络环境切换，主动触发
63 play ENOUGH_DATA 11.38 44.2 44.2
64 playing ENOUGH_DATA 11.41 44.2 44.2
65 timeupdate ENOUGH_DATA 11.6 44.2 44.2
…
198 timeupdate ENOUGH_DATA 44.15 44.2 44.2
199 timeupdate ENOUGH_DATA 0 44.2 44.2 播放结束
200 seeking ENOUGH_DATA 0 44.2 44.2 寻找中
201 timeupdate ENOUGH_DATA 0.1 44.2 44.2
202 seeked ENOUGH_DATA 0.2 44.2 44.2 播放结束进度回到终点循环播放
203 timeupdate ENOUGH_DATA 0.37 44.2 44.2

iOS QQ

与微信无显著差别

iOS safari

与微信无显著差别

iOS QQ 浏览器 x5 内核

# event readyState currentTime (s) buffered (s) duration (s) 视频状态
1 loadstart NOTHING 0 null NaN 筹备申请数据（初始化结束）
2 progress METADATA 0 null 44.2
3 suspend METADATA 0 null 44.2
4 durationchange METADATA 0 null 44.2
5 loadedmetadata METADATA 0 null 44.2 未触发 play() 事件之前，主动触发以上事件
6 timeupdate METADATA 0 null 44.2 触发 play() 事件，开始播放
7 timeupdate METADATA 0 null 44.2
8 timeupdate METADATA 0 null 44.2

在 QQ 浏览器中除了能够获取视频长度，其余属性均无奈获取。鉴于其体现比拟诡异，咱们的比照中除开此特例。

android– 三星 GT-N7105 4.4.2

android weixin

# event readyState currentTime (s) buffered (s) duration (s) 视频状态
1 loadstart CURRENT_DATA 0 null 1 筹备申请数据（初始化结束）
2 durationchange CURRENT_DATA 0 null 1
3 loadedmetadata CURRENT_DATA 0 null 1
4 loadeddata CURRENT_DATA 0 null 1
5 stalled CURRENT_DATA 0 null 1 未触发 play() 事件之前，主动触发以上事件
6 play ENOUGH_DATA 0 null 1 触发 play() 事件，开始播放，但视频可能并未立即开始播放
7 waiting ENOUGH_DATA 0 null 1
8 canplay ENOUGH_DATA 0 null 1 可能因为加载而卡顿
9 canplaythrough ENOUGH_DATA 0 null 1
10 playing ENOUGH_DATA 0 null 1
11 timeupdate ENOUGH_DATA 0 null 1
12 progress ENOUGH_DATA 0 null 1
13 durationchange ENOUGH_DATA 0 null 44.2
14 playing ENOUGH_DATA 0 null 44.2 视频真正开始播放
15 timeupdate ENOUGH_DATA 0.04 null 44.2
…
90 timeupdate ENOUGH_DATA 17.29 44.2 44.2
91 pause ENOUGH_DATA 17.29 44.2 44.2
92 play ENOUGH_DATA 17.29 44.2 44.2
93 playing ENOUGH_DATA 17.29 44.2 44.2
94 timeupdate ENOUGH_DATA 18.75 44.2 44.2
…
196 timeupdate ENOUGH_DATA 0 44.2 44.2
197 seeking ENOUGH_DATA 0 44.2 44.2
198 timeupdate ENOUGH_DATA 0 44.2 44.2
199 pause ENOUGH_DATA 0 44.2 44.2 无奈主动循环播放

android QQ

与微信无显著差别

android QQ 浏览器

与微信无显著差别

android– 华为 G610-U00 4.2.1

与三星 GT-N7105 4.4.2 weixin 版本无显著差别

退出移动版