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

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&nbsp;:</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

Voir aussi

L'interface HTMLAudioElement
L'interface HTMLVideoElement
L'élément HTML <audio>
L'élément HTML <video>

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 19 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu