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中):

属性 描述
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版本无明显差异

你可能感兴趣的:(前端,javascript,html,视频)