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>
