最近在做一個項目，要求監控影片的播放事件並能夠列印LOG日誌，經過一番思索，使用javascript實現了此功能，程式碼如下： HTML: 複製程式碼 程式碼如下: Multi Source http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> http://www.w3school.com.cn/i/movie.mp4" controls autoplay> JS: 複製程式碼 程式碼如下: <br /> window.addEventListener("load",getVideoEvent);<br /> function getVideoEvent(){<br /> var videoes=document.getElementsByTagName("video");<br /> for (var i = 0; i < videoes.length; i ) {<br /> showEventLog("video" (i 1),videoes[i]);<br /> }<br /> }<br /> function showEventLog(videoNum,Media){<br /> eventTester = function(e){<br /> Media.addEventListener(e,function(){<br /> console.log(videoNum ":" e);<br /> });<br /> }<br /> eventTester("loadstart"); //客戶端開始請求資料<br /> eventTester("progress"); //客戶端正在請求資料<br /> eventTester("suspend"); //延遲下載<br /> eventTester("abort"); //客戶端主動終止下載（不是因為錯誤造成），<br /> eventTester("error"); //請求資料時遇到錯誤<br /> eventTester("stalled"); //網速失速<br /> eventTester("play"); //play()和autoplay開始播放時觸發<br /> eventTester("pause"); //pause()觸發<br /> eventTester("loadedmetadata"); //成功取得資源長度<br /> eventTester("loadeddata"); //<br /> eventTester("waiting"); //等待數據，並非錯誤<br /> eventTester("playing"); //開始回放<br /> eventTester("canplay"); //可以播放，但中途可能因為載入而暫停<br /> eventTester("canplaythrough"); //可以播放，歌曲全部載入完畢<br /> eventTester("seeking"); //尋找中<br /> eventTester("seeked"); //找完畢<br /> eventTester("timeupdate"); //播放時間改變<br /> eventTester("ended"); //播放結束<br /> eventTester("ratechange"); //播放速率改變<br /> eventTester("durationchange"); //資源長度改變<br /> eventTester("volumechange"); //音量改變<br /> }<br /> 朋友們主要看下本文的思路即可，希望對大家能有所幫助
