快捷導(dǎo)航

使用javascript實(shí)現(xiàn)監(jiān)控視頻播放并打印日志

更新時(shí)間：2015年01月05日 08:52:42 投稿：hebedich

這篇文章主要介紹了使用javascript實(shí)現(xiàn)監(jiān)控視頻播放并打印日志的方法及示例代碼分享，非常不錯(cuò),需要的朋友可以參考下

最近在做一個(gè)項(xiàng)目，要求監(jiān)控視頻的播放事件并能夠打印LOG日志，經(jīng)過(guò)一番思索，使用javascript實(shí)現(xiàn)了此功能，代碼如下：

HTML:

<!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");    //客戶(hù)端開(kāi)始請(qǐng)求數(shù)據(jù)

eventTester("progress");    //客戶(hù)端正在請(qǐng)求數(shù)據(jù)

eventTester("suspend");    //延遲下載

eventTester("abort");    //客戶(hù)端主動(dòng)終止下載（不是因?yàn)殄e(cuò)誤引起），

eventTester("error");    //請(qǐng)求數(shù)據(jù)時(shí)遇到錯(cuò)誤

eventTester("stalled");    //網(wǎng)速失速

eventTester("play");    //play()和autoplay開(kāi)始播放時(shí)觸發(fā)

eventTester("pause");    //pause()觸發(fā)

eventTester("loadedmetadata");    //成功獲取資源長(zhǎng)度

eventTester("loadeddata");    //

eventTester("waiting");    //等待數(shù)據(jù)，并非錯(cuò)誤

eventTester("playing");    //開(kāi)始回放

eventTester("canplay");    //可以播放，但中途可能因?yàn)榧虞d而暫停

eventTester("canplaythrough"); //可以播放，歌曲全部加載完畢

eventTester("seeking");    //尋找中

eventTester("seeked");    //尋找完畢

eventTester("timeupdate");    //播放時(shí)間改變

eventTester("ended");    //播放結(jié)束

eventTester("ratechange");    //播放速率改變

eventTester("durationchange");    //資源長(zhǎng)度改變

eventTester("volumechange");    //音量改變

}

</script>

小伙伴們主要看下本文的思路即可，希望對(duì)大家能有所幫助

您可能感興趣的文章:

相關(guān)文章

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