使用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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue debug 二种方法
Sep 16 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 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脚本执行卡住的问题
2016/12/27 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
浅谈js中的bind
2019/03/18 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python实现停车管理系统
2018/11/30 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
进修护士自我鉴定
2013/10/14 职场文书
工程项目建议书范文
2014/03/12 职场文书
美容院店长岗位职责
2014/04/08 职场文书
消防安全宣传口号
2014/06/10 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
党员年终个人总结
2015/02/14 职场文书
送达通知书
2015/04/25 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
vue 给数组添加新对象并赋值
2022/04/20 Vue.js