雷火神山直播超两亿，Web播放器事件监听是怎么实现的？
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 技术实现
初始化参数
播放器初始化需要传入两个参数，第一个为播放器容器 ID（即video标签上的ID，该ID名称可自定义，第二个为功能参数对象。
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 应用场景
Web播放器可广泛应用于视频网站、视频电商、体育/游戏赛事直播、在线教育等场景，而事件监听是Web播放器在实际应用中的重要环节，通过事件监听，可对用户的播放行为、播放异常等数据进行完善的统计分析，这对视频相关业务的规划、运营和维护都有着重要的参考意义。
您也可以点击“链接”了解更多关于京东云短视频 SDK的相关资讯。
欢迎点击“京东云”了解更多精彩内容。
雷火神山直播超两亿，Web播放器事件监听是怎么实现的？相关推荐
- Unity AVPro video 开始播放,播放完成事件监听
代码播放: 低版本的路径播放api 不是这个 2.2.4 AVPro Video - Core Edition (核心版) bool isOpening = mediaPlayer.OpenMedi ...
- video播放器的监听
背景 最近做视频功能的时候,要求在视频播放完成后出现弹出层.这里就需要用到对于视频播放完成事件的监听 在全屏播放完成后的弹出层会被视频播放区域覆盖,需要在播放完成后自动推出全屏.但是我查阅的资料都是关 ...
- android音乐播放器监听器,android 音乐播放器电话监听
正好用到整理下 首先 添加 权限 电话监听 /** * * @author xiaoma * 电话监听器类 */ private class MobliePhoneStateListener exte ...
- Android盒子 摄像头,android tv盒子播放器控制 监听上下左右键。
需求是遥控器左右键控制进度 中间键控制暂停,上下键弹出选集,返回键弹出对话框提示是否结束观看. 重新onKeyDown方法. if (keyCode == KeyEvent.KEYCODE_DPAD_ ...
- android遥控器控制播放器,android tv盒子播放器控制 监听上下左右键。
需求是遥控器左右键控制进度 中间键控制暂停,上下键弹出选集,返回键弹出对话框提示是否结束观看. 重新onKeyDown方法. if (keyCode == KeyEvent.KEYCODE_DPAD_ ...
- Web播放器 TcPlayer——腾讯直播sdk的网页播放器
https://www.qcloud.com/document/product/267/7479 功能介绍 腾讯云Web播放器主要解决在手机浏览器和PC浏览器上播放音视频流的问题,使您的视频内容可以不 ...
- 网吧做直播，制做网页播放器代码全集
<script src="/script/ShowHidden.js" type="text/javascript"></script>
- 阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
- 基于WASM的H265 Web播放器
基于WASM的H265 Web播放器 1 背景 2 代码 3 依赖 3.1 WASM 3.2 FFmpeg 3.3 WebGL 3.4 Web Audio 4 播放器实现 4.1 模块结构 4.2 线 ...
最新文章
- js 实现精确加减乘除运算之BigDecimal.js
- Windows Server 2003安装卡巴斯基2010成功
- FD.io/VPP — IPSec
- win10如何使用语音输入文字功能？（语音识别）
- 音视频技术开发周刊 | 187
- 全套支付宝系统架构（内部架构图）【收藏】
- c语言中文件读写面试题,在C ++中有效读取非常大的文本文件
- Qt + Python + OpenCV图标替换工具 之 Qt界面设计（四）
- 《天天数学》连载33：二月二日
- iOS 深拷贝、浅拷贝、自定义对象拷贝简介
- 2022-2028全球赛车模拟器游戏方向盘行业调研及趋势分析报告
- 统计学习基础（概念，基本思想，先验知识）
- 海康ehome协议分析(1)：前言
- linux环境搭建之tftp tftpd服务器
- matlab导出高分辨率图片
- 计算机管理的事件id,事件查看器7035是什么意思_windows事件查看器常见ID代码含义详解...
- js浏览器的打印和去除页眉和页脚
- IEEE 754浮点数标准详解
- 再理解：零空间、行空间、列空间、左零空间、基础解系、极大线性无关组、齐次解、非齐次解之间的关系
- msxml4.dll加载失败、动态链接库例程失败