HTMLMediaElement : évènement loadstart

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 loadstart est déclenché lorsque le navigateur commence à charger une ressource.

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("loadstart", (event) => { })

onloadstart = (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", "/shared-assets/videos/flower.webm");
    source.setAttribute("type", "video/webm");

    video.appendChild(source);
  }
});

Résultat

Spécifications

Spécification
HTML # event-media-loadstart
HTML # handler-onloadstart

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