雷火神山直播超两亿，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播放器在实际应用中的重要环节，通过事件监听，可对用户的播放行为、播放异常等数据进行完善的统计分析，这对视频相关业务的规划、运营和维护都有着重要的参考意义。