为了文章的完整性,首先还是列举一下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版本无显著差别