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>
  • 相关阅读:
    Elasticsearch 架构解析与最佳实践
    Redis一键安装脚本
    Android——GridView(网格视图)相关知识总结贴
    Android——TabHost(标签容器)相关知识总结贴
    Android——RatingBar(评价条)相关知识总结贴
    Android——SeekBar(拖动条)相关知识总结贴
    Android——SQLite/数据库 相关知识总结贴
    Android——媒体库 相关知识总结贴
    Android——Broadcast Receive 相关知识总结贴
    Android——进程通信/ AIDL/Message相关知识总结贴
  • 原文地址:https://www.cnblogs.com/nancy0324/p/4201754.html
Copyright © 2011-2022 走看看