使用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的函数
Jan 31 Javascript
解javascript 混淆加密收藏
Jan 16 Javascript
JQuery 前台切换网站的样式实现
Jun 22 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
JavaScript数组常用方法
Mar 02 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python发布模块的步骤分享
2014/02/21 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
学年末自我鉴定
2014/01/21 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
入伍通知书
2015/04/23 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
民事调解协议书
2016/03/21 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery