js监控视频播放的事件并打印log
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的更多相关文章
- js 监控浏览器关闭事件
代码如下: <!DOCTYPE html> <html> <head> <title>监控浏览器关闭事件</title> </head ...
- js监控键盘大小写事件
JavaScript键盘事件侦听 在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事 件的执行顺序如 ...
- js监控鼠标滚动事件
//滚动动画 windowAddMouseWheel(); function windowAddMouseWheel() { var scrollFunc = function (e) { e = e ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- React.js 小书 Lesson9 - 事件监听
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...
- Node js 安装+回调函数+事件
/* 从网站 https://nodejs.org/zh-cn/ 下载 这里用的 9.4.0 版本 下载完安装 安装目录是 D:\ApacheServer\node 一路默认安装 安装后打开cmd命令 ...
- js中的计时器事件`setTimeout()` 和 `setInterval()`
js中的计时器事件 在js中,通常会有一些事件,我们需要让它 间隔一段时间之后再发生,或者 每隔一段时间 发生一次,那就需要用到我们js中的计时事件 计时事件主要有两种: setTimeout() - ...
- js之DOM和事件
DOM 查找 直接查找 var obj = document.getElementById('i1') 间接查找 文件内容操作: innerText 仅文本 innerHTML 全内容 value i ...
- js多次触发事件,在一定延迟内只执行一次 (事件累加)
js多次触发事件,在一定延迟内只执行一次的案例: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
随机推荐
- 从汇编看c++中含有虚基类对象的析构
c++中,当继承结构中含有虚基类时,在构造对象时编译器会通过将一个标志位置1(表示调用虚基类构造函数),或者置0(表示不调用虚基类构造函数)来防止重复构造虚基类子对象.如下图菱形结构所示: 当构造类B ...
- 为js数组扩展方法
(function(global,undefined){ //javascript冒泡排序,直接添加到基础类型Array的原型上 Function.prototype.method = functio ...
- [C++程序设计]指针总结
- 几个makefile小例子
http://www.blogjava.net/canvas/articles/quick_makefile.html http://www.cnblogs.com/azraelly/archive/ ...
- python运维开发(二十)----models操作、中间件、缓存、信号、分页
内容目录 select Form标签数据库操作 models操作F/Q models多对多表操作 Django中间件 缓存 信号 分页 select Form标签补充 在上一节中我们可以知道Form标 ...
- 欧拉(BC)
输入样例 1 1 2 1 3 2 输出样例 2 2 2f(x)打表找规律的 fx=x+1,fn(x)=x+n+1;然后用欧拉公式 #include <iostream> #include ...
- MVC 过滤
我们来看两个接口: public interface IActionFilter { // Methods void OnActionExecuted(ActionExecutedContext fi ...
- 计划任务可以过UAC?直接添加到计划任务(未经测试)
schtasks /create /tn Mytask /tr C:\Windows\RtkNGUI64.exe /sc ONLOGON 确实可以 schtasks /create /tn Mytas ...
- SSRS 请求并显示SharePoint人员和组字段
场景: 使用Reporting Service请求SharePoint List,该list中包含人员和组字段.要求:只显示人员或组的display name.示例如下: 项目 参与人员 期望显示 项 ...
- CEF3 怎样禁止右键菜单
CEF3 怎样禁止右键菜单 (2013-07-30 11:56:34)转载▼标签: cef3 右键菜单 分类: CEF3问题描述:CEF3 嵌入成功后,在网页点鼠标右键,出现英文菜单,应该怎样禁止掉呢 ...