使用javascript實現(xiàn)監(jiān)控視頻播放并打印日志
更新時間:2015年01月05日 08:52:42 投稿:hebedich
這篇文章主要介紹了使用javascript實現(xiàn)監(jiān)控視頻播放并打印日志的方法及示例代碼分享,非常不錯,需要的朋友可以參考下
最近在做一個項目,要求監(jiān)控視頻的播放事件并能夠打印LOG日志,經(jīng)過一番思索,使用javascript實現(xiàn)了此功能,代碼如下:
HTML:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Multi Source</title>
</head>
<body>
<video src=" <video src=" <video src=" <video src=" <video src=" <video src=" <video src=" <video src=" <video src=" <video src=" <video src=" </body>
</html>
JS:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
window.addEventListener("load",getVideoEvent);
function getVideoEvent(){
var videoes=document.getElementsByTagName("video");
for (var i = 0; i < videoes.length; i++) {
showEventLog("video"+(i+1),videoes[i]);
}
}
function showEventLog(videoNum,Media){
eventTester = function(e){
Media.addEventListener(e,function(){
console.log(videoNum+":"+e);
});
}
eventTester("loadstart"); //客戶端開始請求數(shù)據(jù)
eventTester("progress"); //客戶端正在請求數(shù)據(jù)
eventTester("suspend"); //延遲下載
eventTester("abort"); //客戶端主動終止下載(不是因為錯誤引起),
eventTester("error"); //請求數(shù)據(jù)時遇到錯誤
eventTester("stalled"); //網(wǎng)速失速
eventTester("play"); //play()和autoplay開始播放時觸發(fā)
eventTester("pause"); //pause()觸發(fā)
eventTester("loadedmetadata"); //成功獲取資源長度
eventTester("loadeddata"); //
eventTester("waiting"); //等待數(shù)據(jù),并非錯誤
eventTester("playing"); //開始回放
eventTester("canplay"); //可以播放,但中途可能因為加載而暫停
eventTester("canplaythrough"); //可以播放,歌曲全部加載完畢
eventTester("seeking"); //尋找中
eventTester("seeked"); //尋找完畢
eventTester("timeupdate"); //播放時間改變
eventTester("ended"); //播放結(jié)束
eventTester("ratechange"); //播放速率改變
eventTester("durationchange"); //資源長度改變
eventTester("volumechange"); //音量改變
}
</script>
小伙伴們主要看下本文的思路即可,希望對大家能有所幫助
相關(guān)文章
JavaScript中iframe實現(xiàn)局部刷新的幾種方法匯總
Iframe是一種嵌入網(wǎng)頁的框架形式,Web頁面可以通過更改嵌入的部分,達到部分內(nèi)容刷新,通過本文和大家一起學(xué)習(xí)iframe實現(xiàn)局部刷新的幾種方法匯總,對iframe局部刷新相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01JS實現(xiàn)移動端實時監(jiān)聽輸入框變化的實例代碼
這篇文章主要介紹了JS實現(xiàn)移動端實時監(jiān)聽輸入框變化的解決方案,需要的朋友可以參考下2017-04-04javascript結(jié)合CSS實現(xiàn)蘋果開關(guān)按鈕特效
這篇文章主要介紹了javascript結(jié)合CSS實現(xiàn)蘋果開關(guān)按鈕特效的方法以及全部代碼,效果非常不錯,兼容性也很好,有需要的小伙伴自己參考下2015-04-04關(guān)于promise和async用法以及區(qū)別詳解
Promise是一個構(gòu)造函數(shù),我們就可以new Promise()得到一個 Promise的實例,下面這篇文章主要給大家介紹了關(guān)于promise和async用法以及區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-01-01js+html5實現(xiàn)canvas繪制網(wǎng)頁時鐘的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制網(wǎng)頁時鐘的方法,涉及html5圖形繪制的基礎(chǔ)技巧,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05