雷火神山直播超两亿，Web播放器事件监听是怎么实现的？

栏目: IT技术 · 发布时间: 4年前

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	搜寻指定播放位置开始时触发。
ti m eupdate	当前播放位置有变更，可以理解为 currentTime 有变更。
volumechange	设置音量或者 muted 属性值变更时触发。
waiting	播放停止，下一帧内容不可用时触发。
ended	视频播放已结束时触发。此时 currentTime 值等于媒体资源最大值。
fullscreenchange	全屏状态切换时触发。

02 技术实现

初始化参数

播放器初始化需要传入两个参数，第一个为播放器容器 ID（即video标签上的ID，该ID名称可自定义。例如： <video id=“player-video-id”></video>），第二个为功能参数对象。

 var player = JDplayer('player-video-id', options);

初始化播放器返回监听事件对象的方法

名称	参数及类型	返回值及类型	说明
on(type ， listerner)	(String, Function)	无	监听事件。
one(type ， listerner)	(String, Function)	无	监听事件，事件处理函数最多只执行1次。
off(type ， listerner)	(String, Function)	无	解绑事件监听。

事件监听的技术实现

播放器可以通过初始化返回的对象进行事件监听，示例：

 var player = JDplayer('player-video-id', options);  
  // player.on(type, function(){
  // 做一些处理
 // });
 player.on('error', function(error) {
   // 做一些处理
 });

其中 type 为事件类型，具体事件信息详见监听事件明细表。

03 应用场景

Web播放器可广泛应用于视频网站、视频电商、体育/游戏赛事直播、在线教育等场景，而事件监听是Web播放器在实际应用中的重要环节，通过事件监听，可对用户的播放行为、播放异常等数据进行完善的统计分析，这对视频相关业务的规划、运营和维护都有着重要的参考意义。

雷火神山直播超两亿，Web播放器事件监听是怎么实现的？