使用javascript实现监控视频播放并打印日志
最近在做一个项目，要求监控视频的播放事件并能够打印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>
小伙伴们主要看下本文的思路即可，希望对大家能有所帮助
相关推荐
-
js监控IE火狐浏览器关闭、刷新、回退、前进事件
<html> <head> <title>test</title> <script language ="javaScript"> <!--关闭浏览器 --> var flag = true; window.onbeforeunload = function () { if (flag) { var evt = window.event || arguments[0]; var userAgent = naviga
-
使用Javascript监控前端相关数据的代码
本篇文章介绍了Javascript监控前端相关数据,项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 function error(msg,url,line){ var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息 var m =[msg, url, line, navigator.userAgent, +new Dat
-
监控用户是否关闭浏览器的js代码
test function RunOnBeforeUnload() { window.event.returnValue = '关闭浏览器将退出系统.'; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 效果如下所示: 当wondow.event.returnValue为空的时候,这个选择提示框是不会出现的. 可是问题又来了:假如我希望用户点击"确定"按钮关闭浏览器的时候能够保存用户相关数据.那么我又应该怎么做呢?看来只有用onunload参数了. 将上面的代码修改如下
-
使用javascript实现监控视频播放并打印日志
最近在做一个项目,要求监控视频的播放事件并能够打印LOG日志,经过一番思索,使用javascript实现了此功能,代码如下: HTML: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Multi Source</tit
-
ELK与Grafana联合打造可视化监控来分析nginx日志
目录 修改nginx打印日志格式 安装logstash后,修改配置文件 配置解析: input段: filter段: output段: 安装GeoIP: 安装Grafana 配置Grafana数据源 配置Grafana 画图模版 打造一个帅气的监控需要什么: Grafana 前端数据分析平台 Elasticsearch 全文检索引擎 Logstash 日志收集处理框架 dashboard 监控面板出处 前提是elk集群和Grafana安装完毕,google上请自行搜索安装,这里不写了. 修改ng
-
Log4j定时打印日志及添加模块名配置的Java代码实例
配置间隔时间,定时打印日志 接到个需求,通过log4j定时打印日志,需求描述如下:需要能够定时打印日志,时间间隔可配.说到定时,首先想到了DailyRollingFileAppender类,各种定时,根据datePattern,这个可以参考类SimpleDateFormat类,常见的一些定时设置如下: '.'yyyy-MM: 每月 '.'yyyy-ww: 每周 '.'yyyy-MM-dd: 每天 '.'yyyy-MM-dd-a: 每天两次 '.'yyyy-MM-dd-HH: 每小时 '.'yy
-
输出执行操作和打印日志的shell脚本实例
cat /mnt/log_function.sh #!/bin/bash #log function ####log_correct函数打印正确的输出到日志文件 function log_correct () { DATE=`date "+%Y-%m-%d %H:%M:%S"` ####显示打印日志的时间 USER=$(whoami) ####那个用户在操作 echo "${DATE} ${USER} execute $0 [INFO] $@" >>/v
-
C++软件添加dump调试打印日志(推荐)
C++软件添加dump调试打印日志(推荐) #include <DbgHelp.h> #pragma comment(lib, "dbghelp.lib") LONG WINAPI TopLevelExceptionFilter(struct _EXCEPTION_POINTERS *pExceptionInfo) { //cout << "Enter TopLevelExceptionFilter Function" << en
-
Mac 下 Android Studio 不打印日志的解决办法
Mac 下 Android Studio 不打印日志的解决办法 前言: 在 Mac 下使用 Android Studio 时常会遇到 Android Monitor 突然不打印日志的情况,目前我知道的有三个方法: 1.重启 Android Studio 这个不需要多说,点击 Android Studio 的 File => Invalidate caches / Restart ,选择 Just Restart 2.重启 adb 命令行下输入:adb kill-server 关闭 adb,adb
-
详解SSM框架下结合log4j、slf4j打印日志
本文主要介绍了详解SSM框架下结合log4j.slf4j打印日志,分享给大家,具体如下: 首先加入log4j和slf4j的jar包 <!-- 日志处理 <!-- slf4j日志包--> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.21</version> </dep
-
Android中如何安全地打印日志详解
前言 在Android开发过程中,不管是写Demo还是实战项目中,都会打印一些日志用于记录数据,调试来着,Android中的日志工具类是Log,这个类提供了一些方法来打印日志.五个级别,v.d.i.w.e,各有不同的重载. 当谈到如何打印日志?很多人会想这不是很简单,直接使用android.util.Log这个类不就行了?然而,日志属于非常敏感的信息:逆向工程师在逆向你的程序的时候,本来需要捕捉你程序的各种输出,然后进行推测,顺藤摸瓜然后得到需要的信息:一旦你的日志泄漏,无异于门户洞开,破解你的
-
Django 使用logging打印日志的实例
Django使用python自带的logging 作为日志打印工具.简单介绍下logging. logging 是线程安全的,其主要由4部分组成: Logger 用户使用的直接接口,将日志传递给Handler Handler 控制日志输出到哪里,console,file- 一个logger可以有多个Handler Filter 控制哪些日志可以从logger流向Handler Formatter 控制日志的格式 用户使用logging.getLogger([name])获取logger实例. 如
-
Unity3D在Preview中打印日志的方法
Preview窗口除了可以预览模型之外,我们还可以做别的操作. 今天我们来写个小工具在Preview窗口中显示调试信息. 可以看下面的图,同样是打印 health 和 power 的日志,在 Preview 中显示比在 Console 中显示舒服多了. 左边是Console中显示,右边是Preview窗口中显示. 创建Editor目录,然后把下面的脚本放进去 using UnityEngine; using UnityEditor; [CustomEditor(typeof(Object), t