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.

Dans cet article

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.

js
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

js
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

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 vous a-t-elle été utile ?

Oui Non

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

API HTML DOM
HTMLMediaElement
Propriétés d'instance
Méthodes d'instance
Évènements
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript