HTMLMediaElement : évènement loadeddata

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 loadeddata est déclenché lorsque l'image à la position de lecture actuelle du média a fini de se charger ; souvent la première image.

Note : Cet évènement ne sera pas déclenché sur les appareils mobiles/tablettes si l'option d'économie de données est activée dans les paramètres du navigateur.

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

onloadeddata = (event) => { }

Ces exemples ajoutent un écouteur d'évènement pour l'évènement loadeddata de HTMLMediaElement, puis affichent un message lorsque ce gestionnaire d'évènement a réagi au déclenchement de l'évènement.

Utiliser addEventListener() :

const video = document.querySelector("video");

video.addEventListener("loadeddata", (event) => {
  console.log(
    "Youpi ! L'état de préparation vient de passer à " +
      "HAVE_CURRENT_DATA ou plus pour la première fois.",
  );
});

Utiliser la propriété de gestionnaire d'évènement onloadeddata :

const video = document.querySelector("video");

video.onloadeddata = (event) => {
  console.log(
    "Youpi ! L'état de préparation vient de passer à " +
      "HAVE_CURRENT_DATA ou plus pour la première fois.",
  );
};