HTML DOM onloadstart Event

Last Updated : 30 Jun, 2023

The HTML DOM onloadstart event occurs when the loading process of a specified audio/video starts. events that occur during the loading process of an audio/video:

onloadstart
ondurationchange
onloadedmetadata
onloadeddata
onprogress
oncanplay
oncanplaythrough

Syntax:

In HTML:

<element onloadstart="myScript">

In JavaScript:

object.onloadstart = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("loadstart", myScript);

Example: In this example, we will see the use of DOM onloadstart Event.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM loadstar event
    </title>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>DOM loadstar event</h2>
    <video controls id="VidId">
        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230616174736/Animation.gif"
                type="video/mp4">
    </video>
 
    <script>
        document.getElementById(
            "VidId").addEventListener(
                "loadstart", GFGFun);
        function GFGFun() {
            alert("Start the load video");
        }
    </script>
</body>
 
</html>