Récemment, je travaille sur un projet qui nécessite de surveiller les événements de lecture vidéo et de pouvoir imprimer les journaux. Après quelques réflexions, j'ai implémenté cette fonction à l'aide de JavaScript, et le code est le suivant:
HTML:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Multi Source </TITME>
</ head>
<body>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
<video src = "http://www.w3school.com.cn/i/movie.mp4" Contrôles AutoPlay> </ Video>
</docy>
</html>
JS:
La copie de code est la suivante:
<script type = "text / javascript">
window.addeventListener ("charger", getVideoEvent);
fonction getvideoevent () {
var videos = document.getElementsByTagName ("vidéo");
for (var i = 0; i <videos.length; i ++) {
showEventLog ("vidéo" + (i + 1), vidéo [i]);
}
}
fonction showeventlog (videonum, media) {
EventTester = fonction (e) {
Media.addeventListener (e, function () {
Console.log (vidéos + ":" + e);
});
}
EventTester ("LoadStart"); // Le client commence à demander des données
EventSter ("Progress"); // Le client demande des données
EventSter ("Suspender"); // téléchargement retardé
EventSter ("Abô"); // Le client met l'accent sur le téléchargement (non causé par une erreur),
EventTester ("Error"); // Une erreur a été rencontrée lors de la demande de données
EventSter ("Stapheled"); // Arrête la vitesse du réseau
EventTester ("Play"); // déclenché lorsque Play () et la lecture automatique commencent à jouer
EventTester ("pause"); // Pause () déclenche
EventTester ("LoadedMetadata"); // Obtenir avec succès la longueur des ressources
EventSter ("LoadedData"); //
EventSter ("Waiting"); // en attente de données, pas une erreur
EventTester ("Playing"); // Démarrer la lecture
EventTester ("CanPlay"); // peut jouer, mais peut être arrêté en raison du chargement au milieu
EventTester ("CanPlaythrough"); // peut être joué, toutes les chansons sont chargées
EventSter ("Cherche"); //Recherche
EventSter ("recherché"); // Recherche terminée
EventTester ("Timeupdate"); // Modifications du temps de lecture
EventSter ("terminé"); // La lecture se termine
EventSter ("RateChange"); // Le taux de lecture change
EventTester ("durée"); // Modifications de la longueur des ressources
EventSter ("VolumeChange"); // Changement de volume
}
</cript>
Amis, veuillez lire les idées de cet article, j'espère que cela vous sera utile