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>
  • 相关阅读:
    spring的APO
    设计系统测试计划需要参考的项目文档有
    系统测试的策略
    软件测试包括
    简述你在以前的工作中做过哪些事情,比较熟悉什么
    在C/C++中static有什么用途?(请至少说明两种)
    引用与指针有什么区别?
    说说你对集成测试中自顶向下集成和自底向上集成两个策略的理解,要谈出它们各自的优缺点和主要适应于哪种类型测试;
    系统测试的策略
    通过画因果图来写测试用例的步骤为___、___、___、___及把因果图转换为状态图共五个步骤。 利用因果图生成测试用例的基本步骤是:
  • 原文地址:https://www.cnblogs.com/nancy0324/p/4201754.html
Copyright © 2011-2022 走看看