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播放器事件监听是怎么实现的?的更多相关文章

  1. 阿里云web播放器

    原文地址:https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi 一.概念说明 1. pla ...

  2. Web播放器

    web视频播放器的使用及遇到的问题记录 TcPlayer播放器(腾讯Web超级播放器) https://cloud.tencent.com/document/product/881/20207 Ste ...

  3. Vue + WebRTC 实现音视频直播(附自定义播放器样式)

    1. 什么是WebRTC 1.1 WebRTC简介 WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频 ...

  4. ckplayer,超酷网页播放器,用于集成在网站中的播放器

    自己在工作中做了一个教学网站,点击左边课程,右边播放视频,经过源代码分析,用的就是这个播放器 网址:http://www.ckplayer.com/ 具体使用播放器网站上说的比较明白 div id=& ...

  5. SWF Web播放器

    <HTML> <HEAD> <!-- saved from url=(0013)about:internet --> <TITLE> Untitled. ...

  6. 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)

    前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...

  7. IOS使用AVAudioPlayer播放mp3歌曲文件并监听来电打断

    本实例实现了AVAudioPlayer播放mp3歌曲文件,实现了播放.暂停.继续操作,音乐音量控制.播放进度显示,同时监听来电打断事件 一.控件初始化 - (void)viewDidLoad { [s ...

  8. 抛开flash,自己开发实现C++ RTMP直播流播放器

    抛开flash,自己开发实现C++ RTMP直播流播放器 众所周知,RTMP是以flash为客户端播放器的直播协议,主要应用在B/S形式的场景中.本人研究并用C++开发实现了RTMP直播流协议的播放器 ...

  9. 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器

    我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...

随机推荐

  1. C语言入门书籍知识点记录

    1. 数据在内存中的存储(二进制存储) 内存条:电路的电压有两种状态:0V或者5V,对应的一个元器件有2种状态:0 或者1. 一般情况下我们不一个一个的使用元器件,而是将8个元器件看做一个单位. 一个 ...

  2. #define 和 const

    来自:牛客网参考解析 1.const定义常量是有数据类型的,而#define宏定义常量却没有2.const常量有数据类型,而宏常量没有数据类型.编译器可以对const进行类型安全检查,   而对后者只 ...

  3. 前端Cannot read property 'disabled' of null 问题解决

    就是在项目中,控制台一直在报这个错,一直没找到是什么问题, 后来经过一番排查,发现是 因为在页面中使用了el-dropdown,但是在这个标签里面没有设置它的子元素,所以会报错,解决的方法就是在el- ...

  4. for 循环遍历数据,根据不同的条件判断动态渲染页面!

    整体的逻辑为:for 循环遍历出数据,在for 循环里判断,根据不同的条件渲染 一.html页面结构 二.css就不再写了 三.JS逻辑代码 var listGroup='' ;k<data.i ...

  5. matlab安装matconvnet出错总结

    在安装过程中出现两种错误: mex -settup C 出错 mex -setup C 之后, vl_complilenn出错 matconv库需要autoNN和mcnExtraLayers两个库支持 ...

  6. 12541:TNS无监听状态

    上次在项目上遇见数据库报这个问题,然后网上几乎都是让重新进行配置数据库.配置多次之后还是无效,最后找到了问题的根源. 使用的是Oracle数据库,用PLSQL登录报的这个错误. 在计算机全局搜索:li ...

  7. P1076 Wifi密码

    P1076 Wifi密码 转跳点:

  8. SpringMVC一点简单地源码解析

    . 1.1 init(初始化) 在第一次发出请求时,会调用HttpServletBean 的init()方法 org.springframework.web.servlet.HttpServletBe ...

  9. Easy_Re

    这题比较简单,一波常规的操作之后直接上ida(小白的常规操作在以前的博客里都有所以这里不在赘述了),ida打开之后查看一下, 这里应该就是一个入口点了,接着搜索flag字符串, 上面的黄色的部分转换成 ...

  10. jsp中include的两种用法

    JSP中的include的两种用法 1.两种用法 <%@ include file=” ”%> <jsp:include page=” ” flush=”true”/> 2.用 ...