The onloadstart attribute in HTML is an event attribute that is triggered when the loading process of a specific audio or video element begins.
Definition and Usage
➔ This attribute is supported by the audio and video tags.
➔ When loading an audio/video, the following events occur.
- loadstart
- durationchange
- loadedmetadata
- loadeddata
- progress
- canplay
- canplaythrough
Syntax
//In HTML
<audio|video onloadstart="myScript">
//In JavaScript
audio|video_object.onloadstart=function(){myScript};
//In JavaScript, using EventListener
audio|video_object.addEventListener("loadstart", myScript);
➔ When loading an audio/video, the following events occur in sequence, even if we call them randomly.
Example
<script>
const video = document.querySelector("video");
const eventLog = document.querySelector("#eventLog");
function handleEvent(event) {
eventLog.textContent += `event.type+"\n"`;
}
video.addEventListener("loadeddata", handleEvent);
video.addEventListener("loadedmetadata", handleEvent);
video.addEventListener("durationchange", handleEvent);
video.addEventListener("progress", handleEvent);
video.addEventListener("loadstart", handleEvent);
video.addEventListener("canplay", handleEvent);
video.addEventListener("canplaythrough", handleEvent);
</script>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onloadstart | <audio>, <video> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onloadstart attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML onloadstart attribute example</h3>
<div class="example">
<video controls id="myvideoid" width="250">
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<source src="source-video-path.mp4"
type="video/mp4">
</video>
</div>
<div class="event-log">
Event log:<p readonly id="eventLog"></p>
</div>
<script>
const video = document.querySelector("video");
const eventLog = document.querySelector("#eventLog");
function handleEvent(event) {
eventLog.innerHTML += event.type + "<br>";
}
video.addEventListener("loadeddata", handleEvent);
video.addEventListener("loadedmetadata", handleEvent);
video.addEventListener("durationchange", handleEvent);
video.addEventListener("progress", handleEvent);
video.addEventListener("loadstart", handleEvent);
video.addEventListener("canplay", handleEvent);
video.addEventListener("canplaythrough", handleEvent);
</script>
<p>Note: If you set src correctly, the handler will generate a response.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.