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 networkState Property
The HTML DOM Video networkState property returns a numeric value that represents the current network state of a video element. This read-only property helps developers understand whether the video is loading, idle, or encountering network issues.
Syntax
Following is the syntax to get the networkState property −
videoElement.networkState
Return Value
The networkState property returns one of the following numeric values −
0 (NETWORK_EMPTY) − The video element has not yet been initialized. No network activity has started.
1 (NETWORK_IDLE) − The video element is active and has selected a resource, but is not currently using the network.
2 (NETWORK_LOADING) − The browser is actively downloading video data from the network.
3 (NETWORK_NO_SOURCE) − No suitable video source was found. The element cannot load any media.
Example − Basic Usage
Following example demonstrates how to check the networkState of a video element −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video networkState</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video NetworkState Example</h2>
<video id="myVideo" width="400" controls>
<source src="/html5/foo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="checkNetworkState()">Check Network State</button>
<p id="result"></p>
<script>
function checkNetworkState() {
var video = document.getElementById("myVideo");
var state = video.networkState;
var stateText = "";
switch(state) {
case 0: stateText = "NETWORK_EMPTY (0) - Not initialized"; break;
case 1: stateText = "NETWORK_IDLE (1) - Ready but not loading"; break;
case 2: stateText = "NETWORK_LOADING (2) - Currently downloading"; break;
case 3: stateText = "NETWORK_NO_SOURCE (3) - No source found"; break;
}
document.getElementById("result").innerHTML = "Network State: " + stateText;
}
</script>
</body>
</html>
The output shows the current network state when the button is clicked −
Network State: NETWORK_LOADING (2) - Currently downloading
Example − Dynamic Source Loading
Following example shows how networkState changes when setting video source dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Video Source Loading</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Video Source Example</h2>
<video id="dynamicVideo" width="400" controls>
</video>
<br><br>
<button onclick="setSource()">Set Video Source</button>
<button onclick="removeSource()">Remove Source</button>
<button onclick="getNetworkState()">Get Network State</button>
<p id="display"></p>
<script>
var video = document.getElementById("dynamicVideo");
var display = document.getElementById("display");
function setSource() {
video.src = "/html5/foo.mp4";
video.load();
display.innerHTML = "Video source set and loading...";
}
function removeSource() {
video.removeAttribute("src");
video.load();
display.innerHTML = "Video source removed.";
}
function getNetworkState() {
var state = video.networkState;
var message = "Network State: " + state + " (";
switch(state) {
case 0: message += "NETWORK_EMPTY)"; break;
case 1: message += "NETWORK_IDLE)"; break;
case 2: message += "NETWORK_LOADING)"; break;
case 3: message += "NETWORK_NO_SOURCE)"; break;
}
display.innerHTML = message;
}
</script>
</body>
</html>
This example demonstrates different networkState values based on whether a source is set or removed −
Initially: Network State: 0 (NETWORK_EMPTY) After setting source: Network State: 2 (NETWORK_LOADING) After removing source: Network State: 3 (NETWORK_NO_SOURCE)
Common Use Cases
The networkState property is commonly used in the following scenarios −
Loading indicators − Show loading spinners when networkState is 2 (NETWORK_LOADING).
Error handling − Detect when no source is available (state 3) and display appropriate messages.
Network monitoring − Track video loading progress and network activity.
Adaptive streaming − Make decisions about video quality based on network state.
Browser Compatibility
The networkState property is supported in all modern browsers that support the HTML5 video element, including Chrome, Firefox, Safari, Edge, and Opera. It has been part of the HTML5 specification since its early versions.
Conclusion
The networkState property provides valuable insights into the current network status of video elements. It helps developers create better user experiences by allowing them to respond appropriately to different loading states, from initialization through active downloading to error conditions.
179 Views
