使用javascript实现监控视频播放并打印日志

前端技术 2023/09/04 JavaScript

最近在做一个项目，要求监控视频的播放事件并能够打印LOG日志，经过一番思索，使用javascript实现了此功能，代码如下：

HTML:

http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
<video src=\"http://www.w3school.com.cn/i/movie.mp4\" controls autoplay></video>
</body>
</html>

JS:

复制代码 代码如下:

<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\");    //客户端开始请求数据
eventTester(\"progress\");    //客户端正在请求数据
eventTester(\"suspend\");    //延迟下载
eventTester(\"abort\");    //客户端主动终止下载（不是因为错误引起），
eventTester(\"error\");    //请求数据时遇到错误
eventTester(\"stalled\");    //网速失速
eventTester(\"play\");    //play()和autoplay开始播放时触发
eventTester(\"pause\");    //pause()触发
eventTester(\"loadedmetadata\");    //成功获取资源长度
eventTester(\"loadeddata\");    //
eventTester(\"waiting\");    //等待数据，并非错误
eventTester(\"playing\");    //开始回放
eventTester(\"canplay\");    //可以播放，但中途可能因为加载而暂停
eventTester(\"canplaythrough\"); //可以播放，歌曲全部加载完毕
eventTester(\"seeking\");    //寻找中
eventTester(\"seeked\");    //寻找完毕
eventTester(\"timeupdate\");    //播放时间改变
eventTester(\"ended\");    //播放结束
eventTester(\"ratechange\");    //播放速率改变
eventTester(\"durationchange\");    //资源长度改变
eventTester(\"volumechange\");    //音量改变
}
</script>

小伙伴们主要看下本文的思路即可，希望对大家能有所帮助

本文地址：https://www.stayed.cn/item/9678

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案