HTML DOM onloadedmetadata Event

Last Updated : 20 Jun, 2023

The onloadedmetadata event in HTML occurs when metadata is loaded for the specified audio/video. Events that occur during the loading process of an audio/video:

onloadstart
ondurationchange
onloadedmetadata
onloadeddata
onprogress
oncanplay
oncanplaythrough

Syntax:

In HTML:

<element onloadedmetadata="myScript">

In JavaScript:

object.onloadedmetadata = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("loadedmetadata", myScript);

Example: In JavaScript, using the addEventListener() method

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM onloadeddata Event
    </title>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h2>
            HTML DOM onloadedmetadata Event
        </h2>
        <video controls id="VideoId">
            <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190705202742/Disabling-Tabs.mp4"
                    type="video/mp4">
        </video>
 
        <script>
            document.getElementById(
                "VideoId").addEventListener(
                    "loadedmetadata", GFGFun);
            function GFGFun() {
                alert("Metadata loaded");
            }
        </script>
    </center>
</body>
 
</html>