HTML onloadedmetadata Event Attribute - HTML Media Events Attribute

The HTML onloadedmetadata event attribute specifies a script to be executed when the metadata of a specified audio or video element has been loaded.

Example of HTML onloadedmetadata Event Attribute

It will alert when the meta data of the video has loaded.

index.html

Example: HTML

 <script>
function myFunction() {
  alert("Metadata for video loaded");
}
</script>

<video onloadedmetadata="myFunction()">

Output should be:

Definition and Usage of HTML onloadedmetadata Event Attribute

The loadedmetadata event occurs when metadata for the specified audio/video has been loaded.

Metadata for audio/video consists of: duration, dimensions (video only) and text tracks.

During the loading process of an audio/video, the following events occur, in this order:

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

Browser Support of HTML onloadedmetadata Event Attribute

The numbers in the table specify the first browser version that fully supports the event.

Output should be:

Syntax of HTML onloadedmetadata Event Attribute

<element onloadedmetadata="script">

Attribute Values of HTML onloadedmetadata Event Attribute

Value	Description
script	The script to be run when meta data is loaded

Technical Details of HTML onloadedmetadata Event Attribute

Supported HTML tags:	<audio> and <video>

How to alert when the meta data of the video has loaded

Play Video

index.html

Example: HTML

ï»¿<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('Metadata for video loaded');
}
</script>

<video controls onloadedmetadata="myFunction()">
  <source src="https://file-examples.com/index.php/sample-video-files/sample-mp4-files/" type="video/mp4">
  <source src="https://file-examples.com/index.php/sample-video-files/sample-mp4-files/" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

How to alert when metadata for the audio is loaded

Play Audio.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<audio id="myAudio" controls>
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/ogg">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<script>
let aud = document.getElementById("myAudio");
aud.onloadedmetadata = function() {
  alert("Metadata for audio loaded");
};
</script> 

</body> 
</html>

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Media Events Attribute
Uploaded by:	Admin