zoukankan      html  css  js  c++  java
  • js监控视频播放的事件并打印log

    html代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     5 <title>Multi Source</title>
     6 </head>
     7 <body>
     8 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
     9 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    10 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    11 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    12 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    13 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    14 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    15 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    16 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    17 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    18 <video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
    19 </body>
    20 </html>

    js代码:

     1 <script type="text/javascript">
     2 window.addEventListener("load",getVideoEvent);
     3 function getVideoEvent(){
     4 var videoes=document.getElementsByTagName("video");
     5 for (var i = 0; i < videoes.length; i++) {
     6 showEventLog("video"+(i+1),videoes[i]);
     7 }
     8 }
     9 
    10 function showEventLog(videoNum,Media){
    11 eventTester = function(e){
    12 Media.addEventListener(e,function(){
    13 console.log(videoNum+":"+e);
    14 });
    15 }
    16 eventTester("loadstart");    //客户端开始请求数据
    17 eventTester("progress");    //客户端正在请求数据
    18 eventTester("suspend");    //延迟下载
    19 eventTester("abort");    //客户端主动终止下载(不是因为错误引起),
    20 eventTester("error");    //请求数据时遇到错误
    21 eventTester("stalled");    //网速失速
    22 eventTester("play");    //play()和autoplay开始播放时触发
    23 eventTester("pause");    //pause()触发
    24 eventTester("loadedmetadata");    //成功获取资源长度
    25 eventTester("loadeddata");    //
    26 eventTester("waiting");    //等待数据,并非错误
    27 eventTester("playing");    //开始回放
    28 eventTester("canplay");    //可以播放,但中途可能因为加载而暂停
    29 eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
    30 eventTester("seeking");    //寻找中
    31 eventTester("seeked");    //寻找完毕
    32 eventTester("timeupdate");    //播放时间改变
    33 eventTester("ended");    //播放结束
    34 eventTester("ratechange");    //播放速率改变
    35 eventTester("durationchange");    //资源长度改变
    36 eventTester("volumechange");    //音量改变
    37 }
    38 </script>
  • 相关阅读:
    python中list/tuple/dict/set的区别
    jquery修改ajax的header的字段origin方法,均被浏览器拒绝
    js判断上传文件的大小、类型、修改日期等信息
    js调试方法
    sqlmapapi的跨域访问Access-Control-Allow-Origin:*;ajax
    flask的文件上传和下载
    flask中的g、add_url_rule、send_from_directory、static_url_path、static_folder的用法
    python读写csv时中文乱码问题解决办法
    css中!important的作用
    项目经验——Sql server 数据库的备份和还原____还原数据库提示“介质集有2个介质簇,但只提供了1个。必须提供所有成员” .
  • 原文地址:https://www.cnblogs.com/nancy0324/p/4201754.html
Copyright © 2011-2022 走看看