Vor kurzem arbeite ich an einem Projekt, bei dem die Überwachung von Video -Wiedergabeereignissen und die Drucken von Protokolls erforderlich sind. Nach einigen Gedanken habe ich diese Funktion mit JavaScript implementiert, und der Code ist wie folgt:
HTML:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<title> Multi Source </title>
</head>
<body>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
<Video src = "http://www.w3school.com.cn/i/movie.mp4" steuert Autoplay> </Video>
</body>
</html>
JS:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.addeventListener ("load", getVideoEvent);
Funktion getVideoEvent () {
var videos = document.getElementsByTagName ("Video");
für (var i = 0; i <videos.length; i ++) {
ShowEventLog ("Video"+(i+1), Videos [i]);
}
}
FunktionshowEventLog (Videonum, Media) {
eventTester = function (e) {
Media.AddeVentListener (e, function () {
console.log (videonum+":"+e);
});
}
eventTester ("loadStart"); // Der Client beginnt mit dem Anfordern von Daten
EventTester ("Fortschritt"); // Der Client fordert Daten an
EventTester ("Suspend"); // Verzögerter Download
EventTester ("abort"); // Der Client beendet den Download aktiv (nicht durch einen Fehler verursacht).
EventTester ("Fehler"); // Es wurde ein Fehler aufgetreten, als er Daten anforderte
EventTester ("Stillled"); // Stoppen Sie die Netzwerkgeschwindigkeit
EventTester ("Play"); // Ausgelöst bei Play () und Autoplay beginnen zu spielen
EventTester ("Pause"); // pause () Trigger
EventTester ("LoadedMetadata"); // die Ressourcenlänge erfolgreich erhalten
EventTester ("LoadedData"); //
EventTester ("Warten"); // Warten auf Daten, kein Fehler
EventTester ("Spielen"); // Wiedergabe starten
EventTester ("CanPlay"); // kann spielen, kann aber aufgrund des Ladens in der Mitte stehen bleiben
EventTester ("CanPlayThrough"); // kann gespielt werden, alle Songs sind geladen
EventTester ("suche"); // Suche
EventTester ("gesucht"); // Suche abgeschlossen
EventTester ("TimeUpdate"); // Wiedergabezeit ändert sich
EventTester ("beendet"); // Die Wiedergabe endet
EventTester ("Ratechange"); // Die Wiedergabetraten ändert sich
EventTester ("DurationChange"); // Änderungen der Ressourcenlänge
EventTester ("Volumechange"); // Volumenänderung
}
</script>
Freunde, bitte lesen Sie die Ideen in diesem Artikel, ich hoffe, es wird Ihnen hilfreich sein