HTML DOM Video readyState Property

Last Updated : 27 Mar, 2024

The HTML DOM Video readyState property indicates the loading state of a video element. It reflects whether the video metadata, such as duration and dimensions, is loaded and can range from 0 to 4 representing different states. The Video readyState property is a read-only property.

Syntax:

videoObject.readyState

Return Value: The various numbers depicting different ready states are:

0 = HAVE_NOTHING: There is no information related to whether or not the video is ready.
1 = HAVE_METADATA: It tells that the metadata for the video is ready.
2 = HAVE_CURRENT_DATA: It tells that the data for the current playback position is available, but not enough data to play next frame/millisecond.
3 = HAVE_FUTURE_DATA: It tells that the data for the current and at least the next frame is available.
4 = HAVE_ENOUGH_DATA It tells that there is enough data available to start playing.

HTML DOM Video readyState Property Example

Below program illustrates the Video readyState property.

Example: Getting the current ready state of the video.

html

<!DOCTYPE html>
<html>
    <head>
        <title>Video readyState Property</title>
    </head>

    <body style="text-align: center">
        <h2>
            Video readyState 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 current ready state of
            the video, click the "Return State" button.
        </p>

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

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

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