DOM Audio/Video HTML événement timeupdate
Exemple
Lorsque la position de lecture d'une vidéo change, affichez la position actuelle de la vidéo en secondes :
// Obtenez l'élément <video> avec id="myVideo"
let vid = document.getElementById("myVideo");
// Assignez un événement ontimeupdate à l'élément <video>, et exécutez une fonction si la position de lecture actuelle a changé
vid.ontimeupdate = function() {myFunction()};
function myFunction() {
// Affichez la position actuelle de la vidéo dans un élément <p> avec id="demo"
document.getElementById("demo").innerHTML = vid.currentTime;
} Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
L'événement timeupdate se produit lorsque la position de lecture d'un audio/vidéo change.
Cet événement est déclenché par :
- La lecture de l'audio/vidéo
- Le déplacement de la position de lecture (comme lorsque l'utilisateur avance rapidement à un autre point dans l'audio/vidéo)
Conseil : Cet événement timeupdate est souvent utilisé avec la propriété currentTime de l'objet Audio/Video, qui renvoie la position actuelle de la lecture de l'audio/vidéo, en secondes.
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'événement.
| Événement | |||||
|---|---|---|---|---|---|
| timeupdate | Oui | 9.0 | Oui | Oui | Oui |
Syntaxe
En HTML :
< audio|video ontimeupdate=" myScript "> En JavaScript :
audio|video .ontimeupdate=function(){ myScript }; En JavaScript, en utilisant la méthode addEventListener() :
audio|video .addEventListener("timeupdate", myScript ); Détails Techniques
| Balises HTML prises en charge : | <audio> et <video> |
|---|---|
| Objets JavaScript pris en charge : | Audio, Vidéo |
Plus d'Exemples
Exemple
Lorsque la position de lecture d'un audio change, affichez la position actuelle de l'audio en secondes :
// Obtenez l'élément <audio> avec id="myVideo"
let aud = document.getElementById("myVideo");
// Assignez un événement ontimeupdate à l'élément <audio>, et exécutez une fonction si la position de lecture actuelle a changé
aud.ontimeupdate = function() {myFunction()};
function myFunction() {
// Affichez la position actuelle de l'audio dans un élément <p> avec id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
Exemple
Utilisation de la propriété currentTime pour définir la position de lecture actuelle à 5 secondes :
document.getElementById("myVideo").currentTime = 5;