Commentaire: L'objet vidéo est un nouvel objet ajouté dans HTML5. Il prend en charge la lecture en ligne de vidéos dans divers formats. Il a des fonctions relativement puissantes. Video Object peut signaler les progrès de la lecture actuels via l'événement ONTimeUpdate. Vous trouverez ci-dessous une introduction au problème de l'événement Ontimeupdate de l'objet vidéo. Les amis intéressés peuvent y faire référence.
La date est sur une page de lecture vidéo, qui utilise un objet vidéo HTML5. Il s'agit d'un nouvel objet ajouté dans HTML5. Il prend en charge la lecture en ligne de vidéos dans divers formats. Il a des fonctions relativement puissantes et a élargi de nombreux événements. Il peut contrôler la lecture vidéo via des scripts JavaScript. Reportez-vous aux deux liens suivants:L'objet vidéo peut signaler les progrès de la lecture actuels via l'événement ONTimeUpdate. Dans le même temps, l'événement peut également contrôler d'autres éléments de la page en fonction de la situation de lecture vidéo, tels que la commutation des chapitres et l'affichage d'informations supplémentaires à mesure que la lecture vidéo progresse. Voici un exemple:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "x-ua compatible" content = "ie = edge" />
<Title> </Title>
</ head>
<body>
<script type = "text / javascript">
fonction timeupdate () {
document.getElementById ('time'). innerHtml = video.currentTime;
}
Fonction duréechange () {
document.getElementById ('durée'). innerHtml = vidéo.Duration;
}
fonction SeekVideo () {
document.getElementById ('vidéo'). CurrentTime = document.getElementById ('SeekText'). Valeur;
}
window.onload = function () {
var videoPlayer = document.getElementById ("vidéo");
videoplayer.ontimeupdate = function () {timeupdate (); };
};
</cript>
<div>
<Video Controls = "Controls"
poster = "./ images / vidéoground1.png"
src = "./ videosource / vidéo1.mp4"
OfficeChange = "duréechange ()" />
</div>
<v> Time: <span> 0 </span> de <span> 0 </span> secondes. </div>
<div>
<input type = "text" />
<input type = "Button" value = "Seek Video" />
</div>
</docy>
</html>
Bien sûr, vous pouvez également ajouter dynamiquement des attributs ou suspendre des événements à l'objet vidéo comme utiliser d'autres éléments sur la page, tels que:
video.ontimeupdate = function () {getCurrentVideOposition (); };
Cependant, la ligne de code ci-dessus semble invalide sur Chrome, vous pouvez plutôt utiliser AddeveventListener:
videoPlayer.addeventListener ("timeupdate", function () {getCurrentVideOposition ();}, false);
Je ne sais pas pourquoi onchrome ne peut pas accrocher directement l'événement surtimeupdate sur l'élément vidéo, mais doit ajouter des événements via la méthode AddeventListener. Cependant, AdveventListener est également compatible avec les navigateurs IE et Firefox, il doit donc être passé.