HTML DOM Video readyState Property Example
Below program illustrates the Video readyState property.
Example: Getting the current ready state of the video.
<!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>
Output:
Supported Browsers: The browser supported by HTML DOM Video readyState Property are listed below:
HTML DOM Video readyState Property
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.