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:

l oadstart
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

List of Media Events	HTML Media Events Attribute
HTML onabort Event Attrribute	HTML Media Events Attribute
HTML oncanplay Event Attribute	HTML Media Events Attribute
HTML oncanplaythrough Event Attribute	HTML Media Events Attribute
HTML ondurationchange Event Attribute	HTML Media Events Attribute
HTML onended Event Attribute	HTML Media Events Attribute
HTML onerror Event Attribute	HTML Media Events Attribute
HTML onloadeddata Event Attribute	HTML Media Events Attribute
HTML onloadedmetadata Event Attribute	HTML Media Events Attribute
HTML onloadstart Event Attribute	HTML Media Events Attribute

Single Articles

Example of HTML onloadedmetadata Event Attribute	HTML Media Events Attribute
Definition and Usage of HTML onloadedmetadata Event Attribute	HTML Media Events Attribute
Browser Support of HTML onloadedmetadata Event Attribute	HTML Media Events Attribute
Syntax of HTML onloadedmetadata Event Attribute	HTML Media Events Attribute
Attribute Values of HTML onloadedmetadata Event Attribute	HTML Media Events Attribute
Technical Details of HTML onloadedmetadata Event Attribute	HTML Media Events Attribute
How to alert when the meta data of the video has loaded	HTML Media Events Attribute
How to alert when metadata for the audio is loaded	HTML Media Events Attribute

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