使用javascript实现监控视频播放并打印日志


Posted in Javascript onJanuary 05, 2015

最近在做一个项目,要求监控视频的播放事件并能够打印LOG日志,经过一番思索,使用javascript实现了此功能,代码如下:

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>

小伙伴们主要看下本文的思路即可,希望对大家能有所帮助

Javascript 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
js调用刷新界面的几种方式
May 03 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
详解angular应用容器化部署
Aug 14 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
ES5新增数组的实现方法
May 12 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
jQuery圆形统计图开发实例
Jan 04 #Javascript
jQuery中:selected选择器用法实例
Jan 04 #Javascript
jQuery中:checked选择器用法实例
Jan 04 #Javascript
jQuery中:disabled选择器用法实例
Jan 04 #Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 #Javascript
jQuery中:enabled选择器用法实例
Jan 04 #Javascript
jQuery中:file选择器用法实例
Jan 04 #Javascript
You might like
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
微信小程序框架的页面布局代码
2019/08/17 Javascript
Python的动态重新封装的教程
2015/04/11 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
python中os包的用法
2020/06/01 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
黄河象教学反思
2014/02/10 职场文书
银行简历自我评价
2014/02/11 职场文书
促销活动总结怎么写
2014/06/25 职场文书
经典导游欢迎词
2015/01/26 职场文书
大学生军训感言
2015/08/01 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
vue实现简易音乐播放器
2022/08/14 Vue.js