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播放器事件监听是怎么实现的？》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
