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>

 

你可能感兴趣的:(log)