使用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中的location用法简单介绍
Mar 07 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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开发中四种查询返回结果分析
2011/01/02 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
浅谈json_encode用法
2015/03/05 PHP
Javascript Select操作大集合
2009/05/26 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
vue-router单页面路由
2017/06/17 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
vue+element实现表单校验功能
2019/05/20 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Django的性能优化实现解析
2019/07/30 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python字典排序的方法
2019/10/12 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
毕业横幅标语
2014/10/08 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
总经理检讨书范文
2015/02/16 职场文书
保研推荐信格式
2015/03/25 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers