Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
HTMLMediaElement : évènement progress
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'évènement progress est déclenché périodiquement lorsque le navigateur charge une ressource.
Cet évènement n'est pas annulable et ne se propage pas.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.
addEventListener("progress", (event) => { })
onprogress = (event) => { }
Type d'évènement
Un objet Event générique.
Exemples
Exemple en direct
HTML
<div class="example">
<button type="button">Charger la vidéo</button>
<video controls width="250"></video>
<div class="event-log">
<label for="eventLog">Journal des évènements :</label>
<textarea readonly class="event-log-contents" id="eventLog"></textarea>
</div>
</div>
.event-log-contents {
width: 18rem;
height: 5rem;
border: 1px solid black;
margin: 0.2rem;
padding: 0.2rem;
}
.example {
display: grid;
grid-template-areas:
"button log"
"video log";
}
button {
grid-area: button;
width: 10rem;
margin: 0.5rem 0;
}
video {
grid-area: video;
}
.event-log {
grid-area: log;
}
.event-log > label {
display: block;
}
JavaScript
const chargementVideo = document.querySelector("button");
const video = document.querySelector("video");
const journauxEvents = document.querySelector(".event-log-contents");
let source = null;
function handleEvent(event) {
journauxEvents.textContent += `${event.type}\n`;
}
video.addEventListener("loadstart", handleEvent);
video.addEventListener("progress", handleEvent);
video.addEventListener("canplay", handleEvent);
video.addEventListener("canplaythrough", handleEvent);
chargementVideo.addEventListener("click", () => {
if (source) {
document.location.reload();
} else {
chargementVideo.textContent = "Réinitialiser l'exemple";
source = document.createElement("source");
source.setAttribute(
"src",
"https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4",
);
source.setAttribute("type", "video/mp4");
video.appendChild(source);
}
});
Résultat
Spécifications
| Spécification |
|---|
| HTML # event-media-progress |
| HTML # handler-onprogress |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- L'interface
HTMLAudioElement - L'interface
HTMLVideoElement - L'élément HTML
<audio> - L'élément HTML
<video>
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.