html代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <title>Multi Source</title>

 </head>

 <body>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>

 </body>

 </html>

js代码：

 <script type="text/javascript">

 window.addEventListener("load",getVideoEvent);

 function getVideoEvent(){

 var videoes=document.getElementsByTagName("video");

 for (var i = 0; i < videoes.length; i++) {

 showEventLog("video"+(i+1),videoes[i]);

 }

 }

 function showEventLog(videoNum,Media){

 eventTester = function(e){

 Media.addEventListener(e,function(){

 console.log(videoNum+":"+e);

 });

 }

 eventTester("loadstart");    //客户端开始请求数据

 eventTester("progress");    //客户端正在请求数据

 eventTester("suspend");    //延迟下载

 eventTester("abort");    //客户端主动终止下载（不是因为错误引起），

 eventTester("error");    //请求数据时遇到错误

 eventTester("stalled");    //网速失速

 eventTester("play");    //play()和autoplay开始播放时触发

 eventTester("pause");    //pause()触发

 eventTester("loadedmetadata");    //成功获取资源长度

 eventTester("loadeddata");    //

 eventTester("waiting");    //等待数据，并非错误

 eventTester("playing");    //开始回放

 eventTester("canplay");    //可以播放，但中途可能因为加载而暂停

 eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕

 eventTester("seeking");    //寻找中

 eventTester("seeked");    //寻找完毕

 eventTester("timeupdate");    //播放时间改变

 eventTester("ended");    //播放结束

 eventTester("ratechange");    //播放速率改变

 eventTester("durationchange");    //资源长度改变

 eventTester("volumechange");    //音量改变

 }

 </script>

js监控视频播放的事件并打印log的更多相关文章

  1. js 监控浏览器关闭事件

    代码如下: <!DOCTYPE html> <html> <head> <title>监控浏览器关闭事件</title> </head ...

  2. js监控键盘大小写事件

    JavaScript键盘事件侦听    在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事 件的执行顺序如 ...

  3. js监控鼠标滚动事件

    //滚动动画 windowAddMouseWheel(); function windowAddMouseWheel() { var scrollFunc = function (e) { e = e ...

  4. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  5. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  6. Node js 安装+回调函数+事件

    /* 从网站 https://nodejs.org/zh-cn/ 下载 这里用的 9.4.0 版本 下载完安装 安装目录是 D:\ApacheServer\node 一路默认安装 安装后打开cmd命令 ...

  7. js中的计时器事件`setTimeout()` 和 `setInterval()`

    js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...

  8. js之DOM和事件

    DOM 查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作: innerText 仅文本 innerHTML 全内容 value i ...

  9. js多次触发事件，在一定延迟内只执行一次 （事件累加）

    js多次触发事件,在一定延迟内只执行一次的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

随机推荐

  1. slave延迟原因及优化方法

    转载叶总:http://imysql.com/2015/04/12/mysql-optimization-case-howto-resolve-slave-delay.shtml 一般而言,slave ...

  2. css布局学习笔记之position属性

    position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...

  3. FloatingActionButton 完全解析[Design Support Library(2)]

    一.简单使用 布局: <android.support.design.widget.FloatingActionButton android:layout_width="wrap_co ...

  4. SQL Server 查看空间使用情况的 5 种方法

    解决方法: 方法 1.sp_spaceused 方法 2.dbcc sqlperf 方法 3.dbcc showfilestats 方法 4.dbcc showcontig 方法 5.sys.dm_d ...

  5. 怎样使用淘宝npm镜像

    淘宝的 NPM 镜像是一个完整的npmjs.org镜像.你可以用此代替官方版本(只读),同步频率目前为 15分钟 一次以保证尽量与官方服务同步. 当前 registry.npm.taobao.org ...

  6. 十四、职责链（Chain of Responsibility）模式--行为型模式(Behavioral Pattern)

    职责链模式是一种对象的行为模式[GOF95].在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知 ...

  7. 手机天猫nba项目总结

    页面逻辑: 技术统计 比赛竞猜 猜你喜欢 进入页面时,获取服务器的当前时间.然后进行页面上的每秒递增.1.每隔n秒向后台发送请求,获取最新比分信息,球队图像,球员信息.然后更改页面.2.每隔n秒向后台 ...

  8. .net 反编译利器 dnspy

    Binaries Latest release: https://github.com/0xd4d/dnSpy/releases Latest build (possibly unstable): h ...

  9. 关于WPF中承载 ArcGIS控件。

    原文 http://www.cnblogs.com/zoe-j/archive/2011/05/18/2050208.html 之前就做过WPF的应用,之前承载的MapGIS的二次开发控件,今天写一下 ...

  10. SoftLayer®凭借Flex Images™消融物理与虚拟服务器之间的界线

    网摘文档留存,日后有用; 达拉斯--(美国商业资讯)--随着SoftLayer Flex Images的推出,物理与虚拟IT资源之间的界线正在变得模糊.Flex Images让用户能够捕捉.复制并存储 ...