Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Video readyState Property
The HTML DOM Video readyState property returns a numeric value that represents the current loading state of a video element. This property is essential for determining whether the video has enough data to begin playback or if it's still loading.
Syntax
Following is the syntax to get the ready state of a video element −
videoElement.readyState
Return Value
The readyState property returns an integer value from 0 to 4, each representing a different loading state −
- 0 (HAVE_NOTHING) − No information is available about the media resource
- 1 (HAVE_METADATA) − Metadata for the media resource has been loaded, and the video is seekable
- 2 (HAVE_CURRENT_DATA) − Data for the current playback position is available, but not enough data to play the next frame
- 3 (HAVE_FUTURE_DATA) − Data for the current position and at least the next frame is available
- 4 (HAVE_ENOUGH_DATA) − Enough data is available to start playing the video
Example − Basic ReadyState Check
Following example demonstrates how to check the ready state of a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video ReadyState Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
video {
border: 2px solid #ccc;
margin: 10px;
}
button {
padding: 8px 16px;
margin: 5px;
border-radius: 5px;
border: 1px solid #007bff;
background-color: #007bff;
color: white;
cursor: pointer;
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Video ReadyState Example</h2>
<video id="myVideo" width="320" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video><br>
<button onclick="setVideoSource()">Load Video</button>
<button onclick="checkReadyState()">Check Ready State</button>
<div id="output">Click "Check Ready State" to see the current state</div>
<script>
const video = document.getElementById('myVideo');
const output = document.getElementById('output');
function setVideoSource() {
video.src = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
video.load();
output.textContent = 'Video source loaded. Check ready state now.';
}
function checkReadyState() {
const state = video.readyState;
let stateText = '';
switch(state) {
case 0:
stateText = 'HAVE_NOTHING - No information available';
break;
case 1:
stateText = 'HAVE_METADATA - Metadata loaded, seekable';
break;
case 2:
stateText = 'HAVE_CURRENT_DATA - Current position data available';
break;
case 3:
stateText = 'HAVE_FUTURE_DATA - Current and next frame data available';
break;
case 4:
stateText = 'HAVE_ENOUGH_DATA - Enough data to start playing';
break;
}
output.textContent = `Ready State: ${state} (${stateText})`;
}
</script>
</body>
</html>
Initially, the video element has no source, so the ready state will be 0. After loading a video source, the ready state progresses through different values as the video loads.
Example − Monitoring ReadyState Changes
Following example shows how to monitor ready state changes using event listeners −
<!DOCTYPE html>
<html>
<head>
<title>Monitor ReadyState Changes</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#log {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
height: 150px;
overflow-y: auto;
border: 1px solid #ddd;
}
button {
padding: 8px 16px;
margin: 5px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>ReadyState Change Monitoring</h2>
<video id="monitorVideo" width="320" controls>
<source src="" type="video/mp4">
</video><br>
<button onclick="loadVideo()">Load New Video</button>
<button onclick="clearLog()">Clear Log</button>
<div id="log"><strong>Ready State Log:</strong><br></div>
<script>
const video = document.getElementById('monitorVideo');
const log = document.getElementById('log');
function logReadyState(event) {
const timestamp = new Date().toLocaleTimeString();
const state = video.readyState;
const eventType = event ? event.type : 'initial';
log.innerHTML += `[${timestamp}] Event: ${eventType}, Ready State: ${state}<br>`;
log.scrollTop = log.scrollHeight;
}
// Add event listeners to monitor ready state changes
video.addEventListener('loadstart', logReadyState);
video.addEventListener('loadedmetadata', logReadyState);
video.addEventListener('loadeddata', logReadyState);
video.addEventListener('canplay', logReadyState);
video.addEventListener('canplaythrough', logReadyState);
function loadVideo() {
video.src = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4';
video.load();
logReadyState();
}
function clearLog() {
log.innerHTML = '<strong>Ready State Log:</strong><br>';
}
// Log initial state
logReadyState();
</script>
</body>
</html>
This example tracks how the ready state changes as the video loads, showing the progression from no data to having enough data for playback.
Common Use Cases
The readyState property is commonly used in the following scenarios −
- Preloading checks − Determining if a video has loaded enough data before attempting to play
- User interface updates − Showing loading indicators or enabling/disabling controls based on ready state
- Autoplay logic − Ensuring sufficient data is available before starting automatic playback
- Error handling − Detecting if a video fails to load properly
ReadyState Progression
The ready state typically progresses in the following order as a video loads −
| State | Value | Description | Associated Event |
|---|---|---|---|
| HAVE_NOTHING | 0 | Initial state, no data | loadstart |
| HAVE_METADATA | 1 | Basic video info loaded | loadedmetadata |
| HAVE_CURRENT_DATA | 2 | Current frame data available | loadeddata |
| HAVE_FUTURE_DATA | 3 | Some future data available | canplay |
| HAVE_ENOUGH_DATA | 4 | Enough data for smooth playback | canplaythrough |
Conclusion
The readyState property provides valuable information about a video's loading progress. By checking this property, developers can create responsive video players that adapt their behavior based on how much video data is available for playback.
292 Views
