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#调用API入门

    使用C#调用windows API入门 一:入门,直接从 C# 调用 DLL 导出   其实我们的议题应该叫做C#如何直接调用非托管代码,通常有2种方法: 1.  直接调用从 DLL 导出的函数. 2 ...

  2. Acwing272 最长公共上升子序列

    题目大意:给定两个大小为n的数组,让你找出最长公共上升子序列的长度. 分析:这是一个比较好的dp题,LIS和LCS两大经典线性dp问题相结合,简称LCIS. 代码(O(n*n*n)写法): #incl ...

  3. 修改DUILIB任务栏中显示的图标和EXE图标

    在资源中添加ICO图标,获取属性名,在主窗口文件中的函数InitWindow或OnCreate中添加如下代码: SetIcon(IDR_MAINFRAME); 修改EXE显示图标,在主窗口中加入如下代 ...

  4. Kubernetes——滚动更新和数据管理

    k8s——滚动更新滚动更新就是一次只更新一小部分副本,更新成功之后再更新更多的副本,最终完成所有副本的更新.滚动更新最大的好处是零停机,整个更新的过程中始终有副本运行,从而保证了业务的连续性.kube ...

  5. 百度统计数据导出demo的坑

    1.用户名中文的问题 由于demo文件格式的问题,如果用户名使用中文的话,会出现一下问题 ----------------------preLogin----------------------  [ ...

  6. Flask与Django哪个更好更实用呢?砖家是这么认为的

        这一周我打算做一个 Flask 教程.本文先把 Flask 和 Django 做一个比对,因为我对这两个 Python Web 框架都有实际的开发经验.希望我可以帮助您选择学习哪个框架,因为学 ...

  7. java string常用的占位符形式

        自己在这里总结了三种占位符形式:看下面代码即可 String stringFormat  = "lexical error at position %s, encountered % ...

  8. Codeforces Round #624 (Div. 3)(题解)

    Codeforces Round #624 (Div.3) 题目地址:https://codeforces.ml/contest/1311 B题:WeirdSort 题意:给出含有n个元素的数组a,和 ...

  9. HomePod即将发售,但硬件不再是苹果的救命稻草

    流年不利的苹果,在多个维度都遭到了重创.除了与高通纠缠不清的专利官司外,iPhone销量还直线下滑并影响到营收.最终,苹果股价.市值都处于暴跌态势.面对内外夹击的不利局面,苹果信奉多年的"封 ...

  10. CC3200 飞行计划

    CC3200 飞行计划 2016-01-25 CC3200 资源 CC3200_JTAG调试 CC3200-Uniflash 烧写程序 Mosquitto搭建MQTT 服务器 [示例] CC3200_ ...