HTML onloadeddata Attribute

Last Updated : 10 Mar, 2022

The HTML onloadeddata Attribute is a event attribute which occurs when the current frame data is loaded but the next frame’s data is not enough data to play the audio/video.

Syntax:

<element onloadeddata="myScript">

Attribute Value: This attribute contains single value script which works when onloadeddata event attribute call. This attribute is supported by <audio> and <video> tags.

Example 1:

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML onloadeddata Attribute
        </title>
    </head>
 
    <body>
        <center>
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
            <h2>
                HTML onloadeddata Attribute
            </h2>
            <audio controls id="audioId"
                onloadeddata="GFGfun()">
                <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190625153922/frog.mp3"
                        type="audio/mpeg" />
            </audio>
 
            <script>
                function GFGFun() {
                    alert(
                "Browser has loaded the current frame");
                }
            </script>
        </center>
    </body>
</html>

Output:

After:

Example 2:

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML onloadeddata Attribute
        </title>
    </head>
 
    <body>
        <center>
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
            <h2>
                HTML onloadeddata Attribute
            </h2>
            <video controls id="VideoId"
                width="320"
                height="240"
                onloadeddata="GFGfun()">
            <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190401140735/g4g2.mp4"
                    type="video/mp4" />
        </video>
 
        <script>
        function GFGFun() {
            alert("Browser has loaded the current frame");
        }
            </script>
        </center>
    </body>
</html>