HTML reference manual

HTML tag list

HTML Audio/Video DOM loadedmetadata event

The loadedmetadata event will be triggered after the metadata is loaded.

Online example

Alert when loading video metadata:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Using the video loadedmetadata event-Basic tutorial(oldtoolbag.com)</title>
</head>
<body>
<video id="video1" controls="controls">
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　Your browser does not support HTML5　video tag.
</video>
<script>
myVid=document.getElementById("video1");
myVid.onloadedmetadata=alert("Meta data for video loaded");
</script>　
</body>
</html>

Test and see ‹/›

Definition and usage

When the specified audio has been loaded/A loadedmetadata event will occur when the metadata of the video is loaded.
audio/The metadata of the video includes: duration, size (only video) and text tracks.

When audio/The following events will occur in sequence when the video is in the process of loading:

Browser compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the loadedmetadata event.

Note:Internet Explorer 8 and earlier versions do not support this event.

Syntax

In HTML:

<audio|video onloadedmetadata="SomeJavaScriptCode">

In JavaScript:

audio|video.onloadedmetadata=SomeJavaScriptCode;

Use addEventListener():

audio|video.addEventListener("loadedmetadata", function()
　 {
　 //SomeJavaScriptCode
　 }
);

Technical Details

The following HTML tags support:	<audio>, <video>
The following JavaScript objects support:	Audio, Video

More Examples

Use the onloadedmetadata attribute on HTML elements

Use addEventListener() to listen to the loadedmetadata event

　HTML Audio/Video DOM Reference Manual

HTML: <template> tag