Recently, I am working on a project that requires monitoring video playback events and being able to print LOG logs. After some thought, I implemented this function using javascript, and the code is as follows:
HTML:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Multi Source</title>
</head>
<body>
<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>
<video src="http://www.w3school.com.cn/i/movie.mp4" controls autoplay></video>
</body>
</html>
JS:
The code copy is as follows:
<script type="text/javascript">
window.addEventListener("load",getVideoEvent);
function getVideoEvent(){
var videos=document.getElementsByTagName("video");
for (var i = 0; i < videos.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"); //The client starts requesting data
eventTester("progress"); //The client is requesting data
eventTester("suspend"); //Delayed download
eventTester("abort"); //The client actively terminates the download (not caused by an error),
eventTester("error"); //An error was encountered while requesting data
eventTester("stalled"); //Stop the network speed
eventTester("play"); // Triggered when play() and autoplay start playing
eventTester("pause"); //pause() triggers
eventTester("loadedmetadata"); //Successfully obtain the resource length
eventTester("loadeddata"); //
eventTester("waiting"); //Waiting for data, not an error
eventTester("playing"); //Start playback
eventTester("canplay"); // Can play, but may be paused due to loading in the middle
eventTester("canplaythrough"); // Can be played, all the songs are loaded
eventTester("seeking"); //Searching
eventTester("seeked"); //Search completed
eventTester("timeupdate"); // Playback time changes
eventTester("ended"); //The playback ends
eventTester("ratechange"); //The playback rate changes
eventTester("durationchange"); //Resource length changes
eventTester("volumechange"); //Volume change
}
</script>
Friends, please read the ideas in this article, I hope it will be helpful to you