使用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)文章
通過js獲取select(多選下拉)中所選值，具體實現(xiàn)如下，有需要的朋友可以參考下，希望對大家有所幫助2013-08-08
iscroll動態(tài)加載數(shù)據(jù)完美解決方法
這篇文章主要為大家詳細(xì)介紹了iscroll動態(tài)加載數(shù)據(jù)的完美解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript?發(fā)布訂閱模式（Publish/Subscribe?Pattern）是一種常用的設(shè)計模式，發(fā)布訂閱模式的核心思想是解耦事件的發(fā)生和事件的處理，本文將介紹?JavaScript?發(fā)布訂閱模式的基本原理、應(yīng)用場景以及各場景的代碼示例,需要的朋友可以參考下2023-05-05
在前端開發(fā)中經(jīng)常會遇到這樣一種需求,使用Javascript格式化數(shù)字進(jìn)行輸出,下面這篇文章主要給大家介紹了關(guān)于js金額千分位的6種實現(xiàn)方法,需要的朋友可以參考下2022-03-03
javascript中，new操作符的工作原理是什么?它是怎樣改變構(gòu)造函數(shù)的返回值和this指向的？下面這篇文章就來給大家介紹了關(guān)于Javascript中new()到底做了些什么的相關(guān)資料，需要的朋友可以參考下。2018-03-03
快速理解 JavaScript 中的 LHS 和 RHS 查詢的用法
本篇文章主要介紹了快速理解 JavaScript 中的 LHS 和 RHS 查詢的用法，有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript函數(shù)增強(qiáng)以及額外知識
函數(shù)就是封裝了一段可以被重復(fù)執(zhí)行調(diào)用的代碼塊,下面這篇文章主要給大家介紹了關(guān)于JavaScript函數(shù)增強(qiáng)以及額外知識的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
javascript將浮點數(shù)轉(zhuǎn)換成整數(shù)的三個方法
將浮點數(shù)轉(zhuǎn)換成整數(shù)方法有很多，本例為大家介紹常用的三個方法，如果讀者想到其他好用方法，也可以交流一下2014-06-06
這篇文章介紹了js控制表單奇偶行樣式的簡單方法，有需呀偶的朋友可以參考一下2013-07-07
next.js初始化參數(shù)設(shè)置getServerSideProps應(yīng)用學(xué)習(xí)
這篇文章主要為大家介紹了next.js初始化參數(shù)設(shè)置getServerSideProps的應(yīng)用示例學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10