Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播。在视频业务大数据平台中,播放数据的统计分析非常重要,所以Web播放器在使用过程中,需要对其内部的数据进行收集并上报至服务端,此时,就需要对发生在其内部的一些播放行为进行事件监听。
那么Web播放器事件监听是怎么实现的呢?
01 监听事件明细表
名称 | 介绍 |
play | 已经开始播放,调用 play() 方法或者设置了 autuplay 为 true 且生效时触发,这时 paused 属性为 false。 |
playing | 因缓冲而暂停或停止后恢复播放时触发,paused 属性为 false 。通常用这个事件来标记视频真正播放,play 事件只是开始播放,画面并没有开始渲染。 |
loadstart | 开始加载数据时触发。 |
durationchange | 视频的时长数据发生变化时触发。 |
loadedmetadata | 已加载视频的 metadata。 |
loadeddata | 当前帧的数据已加载,但没有足够的数据来播放视频下一帧时,触发该事件。 |
progress | 在获取到媒体数据时触发。 |
canplay | 当播放器能够开始播放视频时触发。 |
canplaythrough | 当播放器预计能够在不停下来进行缓冲的情况下持续播放指定的视频时触发。 |
error | 视频播放出现错误时触发。 |
pause | 暂停时触发。 |
ratechange | 播放速率变更时触发。 |
seeked | 搜寻指定播放位置结束时触发。 |
seeking | 搜寻指定播放位置开始时触发。 |
timeupdate | 当前播放位置有变更,可以理解为 currentTime 有变更。 |
volumechange | 设置音量或者 muted 属性值变更时触发。 |
waiting | 播放停止,下一帧内容不可用时触发。 |
ended | 视频播放已结束时触发。此时 currentTime 值等于媒体资源最大值。 |
fullscreenchange | 全屏状态切换时触发。 |
02 技术实现
初始化参数
var player = JDplayer('player-video-id', options);
初始化播放器返回监听事件对象的方法
事件监听的技术实现
var player = JDplayer('player-video-id', options);
// player.on(type, function(){
// 做一些处理
// });
player.on('error', function(error) {
// 做一些处理
});
其中 type 为事件类型,具体事件信息详见监听事件明细表。
03 应用场景
欢迎点击”阅读“了解京东智联云短视频SDK产品!