HTML | DOM Video preload Property

HTML | DOM Video played Property

The Video preload property in HTML’s Document Object Model (DOM) specifies whether a video should be loaded when the page loads. It accepts values like auto, metadata, and none to control preloading behavior.

The video preload attribute allows the author to portray to the browser the way the user experience of a website should be implemented.

Table of Content

Video preload property Values:
Video preload property Return Value :
Video preload Property Use Cases
Video preload Property Supported Browsers:

Video preload property Syntax:

Return the preload property:

videoObject.preload

Set the preload property:

videoObject.preload = "auto|metadata|none"

Video preload property Values:

auto :It is used to specify that the browser should load the entire video when the page loads.
metadata :It is used to specify that the browser should load only metadata when the page loads.
none :It is used to specify that the browser should NOT load the video when the page loads.

Video preload property Return Value :

It returns a string value, that represents what data should be preloaded (if any). Possible return values are “auto”, “metadata”, or “none”. See “Property Values” for what the values mean

Video preload property Example :

Here is the basic implementation of using Video preload Property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Video Preload Property
    </title>
</head>

<body style="text-align:center">

    <h1 style="color:green">
        w3wiki
    </h1>
    <h2 style="font-family: Impact">
        Video Preload Property
    </h2>
    <br>

    <video id="Test_Video" width="360" height="240" controls>
        <source src="samplevideo.mp4" type="video/mp4">

        <source src="movie.ogg" type="video/ogg">
    </video>



    <p>
        To return the value of the preload attribute,
        double click the "Return Preload Attribute" button.
    </p>



    <button onclick="My_Video()" 
            type="button">
        Return Preload Attribute
    </button>

    <p id="test"></p>



    <script>
        function My_Video() {
            let v = document.getElementById(
                "Test_Video").preload;
            document.getElementById("test").innerHTML = v;
        }
    </script>

</body>

</html>

Output:

video preload property