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. SparkSQL 疫情Demo练习

    在家闲着没事干, 写个简单的疫情数据处理Demo, 顺便回顾下SparkSQL. 模拟数据(以下数据皆为虚构, 如有雷同不胜荣幸) 市民信息(civic_info.csv) id_no,name,se ...

  2. 在 Mac/Windows 系统中使用 Laradock 搭建基于 Docker 的 Laravel 开发环境 (改)

    开篇 Use Docker First And Learn About It Later 简介 Laradock 是为 Docker 提供的完整 PHP 本地开发环境,和 Homestead 一样提供 ...

  3. ROS学习笔记8-rqt_console和roslaunch

    本教程来自于:http://wiki.ros.org/ROS/Tutorials/UsingRqtconsoleRoslaunch rqt_console 和 rqt_logger_level 是ro ...

  4. 二、Navicat、IDEA、nopad、eclipse、excle工具使用、问题、快捷键

    1.Navicat工具: 目的:本地数据库与远程数据库之间数据导入导出 步骤1:文件--新建oracle链接/mysql的连接 步骤2:工具-选项:将本地oracle的bin\oci.dll 的路径复 ...

  5. C# WinForm 自定义控件,DataGridView背景透明,TabControl背景透明

     注意: 以下代码,属性直接赋值的语法糖要vs2015以上才支持.   using System.ComponentModel; using System.Drawing; using System. ...

  6. Regression 回归——多项式回归

    回归是指拟合函数的模型.图像等.与分类不同,回归一般是在函数可微的情况下进行的.因为分类它就那么几类,如果把类别看做函数值的话,分类的函数值是离散的,而回归的函数值通常是连续且可微的.所以回归可以通过 ...

  7. ubuntu18.04 LAMP DVWA

    一.基本擦作: sudo apt-get install lamp-server^ sudo chmod 777 /var/www #也有可能是/var/www/html,访问127.0.0.1验证是 ...

  8. mac brew redis

    1.搜索brew search redis //出现如下 ==> Searching local taps... hiredis redis redis-leveldb redis@2.8 re ...

  9. 虚拟机下安装win7

    参考博客:https://blog.csdn.net/weixin_43465312/article/details/92662519 下载地址:https://msdn.itellyou.cn/

  10. 2-10 就业课(2.0)-oozie:7、job任务的串联

    4.4.oozie的任务串联 在实际工作当中,肯定会存在多个任务需要执行,并且存在上一个任务的输出结果作为下一个任务的输入数据这样的情况,所以我们需要在workflow.xml配置文件当中配置多个ac ...