The heron from herbertliu

视频加载缓冲以及异常错误监控

h5视频播放监控拓扑图

技术资源

h5页面视频播放的监控对开发方案优化非常重要，目前使用腾讯视频统一播放器，提供了一些接口可以用于播放状态监控，同时video标签提供的很多事件属性也可以加以利用。

1、腾讯视频播放器API

接口文档传送【内网，接口基本等同于video】

目前对于录播视频，onerror接口提供的错误码已覆盖所有。但对于直播视频，目前只有video自身抛出的1-4类错误，其他cgi相关的错误类型均返回-1，错误码覆盖不全，后续会推动补全。

2、video标签的事件属性表现差异：

event	pc侧	iOS	android	关键属性值
loadstart	文件加载，video初始化，未加载任何数据	与PC侧一致	一致	currentTime: 0, buffered.end(0): null, duration: NaN
stalled	视频没有播放，没有取回任何媒介数据：一般是由于网络状况不佳，导致视频下载中断	一致	可能在play()事件触发前	currentTime: 0, buffered.end(0): null, duration: NaN
play	play()事件触发，状态是开始播放，但视频并未真正开始播放	一致	一致	currentTime: 0, buffered.end(0): null, duration: NaN
waiting	play()事件触发后，等待数据	一致	一致	currentTime: 0, buffered.end(0): null, duration: NaN
durationchange	获取到视频长度，duration属性能获得真实视频长度	一致	可能在play()事件触发前，可能没有获取到真实的视频长度：可能触发多次，只有最后一次才能获取到真实的	duration，之前的值有可能为0或者1 PC&&IOS[currentTime: 0, buffered.end(0): null, duration: 44.2 (s)]; android[currentTime: 0, buffered.end(0): null, duration: 1 (s) ]
loadedmetadata	play()事件触发后，获取到元数据	一致	play()事件触发前，没有获取到真实的元数据	PC&&IOS[currentTime: 0, buffered.end(0): 0.88, duration: 44.2 (s)]; android[currentTime: 0, buffered.end(0): null, duration: 1 (s) ]
loadeddata	play()事件触发后，获取到媒介数据	一致	play()事件触发前，没有获取到真实的媒介数据	PC&&IOS[currentTime: 0, buffered.end(0): 0.88, duration: 44.2 (s)]; android[currentTime: 0, buffered.end(0): null, duration: 1 (s) ]
canplay	可以播放，但视频可能还未真正开始播放，并且中途可能因为加载而暂停	一致	一致	currentTime: 0, buffered.end(0): 0.88, duration: 44.2 (s)
playing	视频开始播放	一致	可能还未真正开始播放，并且可能还未获取到视频长度	currentTime: 0, buffered.end(0): 0.88, duration: 44.2 (s)
canplaythrough	视频开始播放后，可以流畅播放	一致	数据可能还没有开始加载，视频可能还未开始播放，视频仍然会卡住	currentTime: 0, buffered.end(0): 0.88, duration: 44.2 (s)
timeupdate	视频播放后，更新播放进度，会有明确的进度变化，可以获取到currentTime	一致	第一次可能会有误差，如果 timeupdate事件的currentTime发生变化，代表视频一定开始播放	currentTime: 0.16, buffered.end(0): 9.18, duration: 44.2 (s)
progress	视频播放后，持续下载，可以获取到当前的缓存buffer，并且全部下载完毕后不再触发	一致	第一次可能会有误差，全部下载完毕后依然继续触发	currentTime: 0.54, buffered.end(0): 12.76, duration: 44.2 (s)
suspend	缓冲中，视频可能卡顿也可能在流畅播放中，全部缓存完毕后不再触发。视频还未真实播放前，pause()事件会触发suspend	一致	一致	currentTime: 0.54, buffered.end(0): 12.76, duration: 44.2 (s)
pause	可能是响应pause()事件暂停，或者是切出页面自动暂停	一致	一致	currentTime: 5.4, buffered.end(0): 14.82, duration: 44.2 (s)
seeking	拖动进度条时，寻找播放位置。或者播放完毕，寻找下一个视频	一致	一致	currentTime: 0, buffered.end(0): 44.2, duration: 44.2 (s)
seeked	拖动进度条时，定位到播放位置。或者开始播放下一个视频，或者是从头开始循环播放	一致	一致	currentTime: 0, buffered.end(0): 44.2, duration: 44.2 (s)
error	错误，无法定位错误原因，无法通过paly()事件继续播放	一致	一致	error.code: {1: 'MEDIA_ERR_ABORTED - 取回过程被用户中止', 2: 'MEDIA_ERR_NETWORK - 当下载时发生错误', 3: 'MEDIA_ERR_DECODE - 当解码时发生错误', 4: 'MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频'}

监控方案

鉴于不用平台上，video标签的事件属性表现还是有一定差异的，所以满足兼容性的监控方案尝试如下。

1、加载时间

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

2、缓冲次数

video对象的buffered属性返回表示视频已缓冲部分的 TimeRanges 对象，currentTime属性设置或返回视频中的当前播放位置（以秒计），利用缓冲区的变化可以记录视频缓冲次数。
缓冲判定为： timeupdate事件中，currentTime 超出 buffered的记录范围。
缓冲完毕判定为：从缓冲判定开始， timeupdate事件中，第一次currentTime 回到 buffered的记录范围。
缓冲时间：缓冲完毕判定时间戳 - 缓冲判定时间戳。

3、异常错误

video对象的error事件触发，有四种错误类型判定：

error.code = 1;  //MEDIA_ERR_ABORTED - 取回过程被用户中止
error.code = 2;  //MEDIA_ERR_NETWORK - 当下载时发生错误 (在播放过程中断网即会触发此类错误)
error.code = 3;  //MEDIA_ERR_DECODE - 当解码时发生错误
error.code = 4;  //MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频

腾讯视频播放器的tvp.Player().onerror()事件封装了上述video对象的error事件，同时添加了其他与cgi相关的错误类型用以详细地抛出播放异常信息。

监控数据

直播视频监控数据

视频初始化加载	pv （次）	平均时间（s）
2G	272	13
3G	596	7
4G	1,412	5
wifi	30,390	5

播放过程中缓冲	pv （次）	平均时间（ms）
2G	0(无数据)	0
3G	0(无数据)	0
4G	30	86
wifi	145	76

视频异常错误	pv （次）（12日）	pv （次）（13日）
error.code = 1 （取回过程被用户中止）	0	0
error.code = 2 （当下载时发生错误）	1	0
error.code = 3 （当解码时发生错误）	119	215
error.code = 4 （不支持音频/视频）	1936	2049
其他cgi错误	0	0

录播视频监控数据

视频初始化加载	pv （次）	平均时间（s）
2G	97	18
3G	261	8
4G	647	4
wifi	13,958	5

播放过程中缓冲	pv （次）	平均时间（ms）
2G	36	149
3G	213	83
4G	565	72
wifi	15,912	86

视频异常错误	pv （次）（12日）	pv （次）（13日）
error.code = 1 （取回过程被用户中止）	0	0
error.code = 2 （当下载时发生错误）	0	0
error.code = 3 （当解码时发生错误）	0	0
error.code = 4 （不支持音频/视频）	72	121
其他cgi错误	1986	2256

herbertliu / heron Goto Github PK

heron's People

Contributors

Stargazers

Watchers

Forkers

heron's Issues