The onloadedmetadata attribute is an event handler that defines a script to run when the media's metadata has finished loading.
Definition and Usage
➔ The onloadedmetadata event is fired when the browser determines the duration, dimensions (for video), and text track of the media file.
➔ This happens after the ondurationchange and onloadstart events, but before the onloadeddata event.
- loadstart
- durationchange
- loadedmetadata
- loadeddata
- progress
- canplay
- canplaythrough
Syntax
//In HTML
<audio|video onloadedmetadata="myScript">
//In JavaScript
audio|video_object.onloadedmetadata=function(){myScript};
//In JavaScript, using EventListener
audio|video_object.addEventListener("loadedmetadata", myScript);
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onloadedmetadata | <audio>, <video> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onloadedmetadata attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML onloadedmetadata 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>
<button type="button" class="loadButton">Load video</button>
</div>
<div class="event-log">
Event log:<p readonly id="eventLog"></p>
</div>
<script>
let source="";
const video = document.querySelector("video");
const loadButton = document.querySelector(".loadButton");
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);
if(video.children[0]==null || video.children[0].getAttribute('src')==null ){
loadButton.addEventListener("click",()=>{
source = document.createElement("source");
//"https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4"
source.setAttribute("src", "video-source.mp4",);
source.setAttribute("type", "video/mp4");
video.appendChild(source);
});
}
</script>
<p>Note: If you set src correctly, the handler will generate a response.</p>
</body>
</html>
Click on the "copy" button and try this example in your project.