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 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.
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 :</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
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.