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 preload Property
The HTML DOM Video preload property controls when video data should be loaded. This property accepts string values that indicate the preferred loading behavior, helping optimize page performance and bandwidth usage. The default value is metadata.
Syntax
Following is the syntax to get the current preload setting −
mediaObject.preload
Following is the syntax to set the preload property −
mediaObject.preload = "auto|metadata|none"
Property Values
The preload property accepts the following string values −
| Value | Description |
|---|---|
auto |
The browser should load the entire video when the page loads |
metadata |
The browser should load only metadata (dimensions, duration, first frame) when the page loads |
none |
The browser should not load the video when the page loads |
Example
Following example demonstrates how to get and set the video preload property −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video preload Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { width: 70%; margin: 0 auto; text-align: center; }
video { margin: 10px; }
button {
padding: 10px 15px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
background: #f0f0f0;
cursor: pointer;
}
#status {
margin: 10px;
padding: 10px;
background: #e8f4fd;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Video Preload Property Demo</h2>
<video id="myVideo" width="320" height="240" controls preload="none">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br>
<button onclick="setPreload('none')">Set None</button>
<button onclick="setPreload('metadata')">Set Metadata</button>
<button onclick="setPreload('auto')">Set Auto</button>
<button onclick="getPreload()">Get Current</button>
<div id="status">Current preload setting: none</div>
</div>
<script>
var video = document.getElementById("myVideo");
var status = document.getElementById("status");
function setPreload(value) {
video.preload = value;
status.innerHTML = "Preload set to: <strong>" + value + "</strong>";
}
function getPreload() {
var currentPreload = video.preload;
status.innerHTML = "Current preload setting: <strong>" + currentPreload + "</strong>";
}
</script>
</body>
</html>
The output shows a video player with buttons to change the preload setting. The status div displays the current preload value when buttons are clicked −
Video player with control buttons below Current preload setting: none (Clicking buttons updates the preload value and status message)
Data Usage Example
Following example demonstrates how different preload settings affect data usage −
<!DOCTYPE html>
<html>
<head>
<title>Preload Data Usage Demo</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.video-container {
display: inline-block;
margin: 10px;
text-align: center;
border: 1px solid #ddd;
padding: 10px;
border-radius: 8px;
}
video { margin-bottom: 10px; }
</style>
</head>
<body>
<h2>Preload Settings Comparison</h2>
<div class="video-container">
<h3>Preload: none</h3>
<video width="200" height="150" controls preload="none">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p>No data loaded initially</p>
</div>
<div class="video-container">
<h3>Preload: metadata</h3>
<video width="200" height="150" controls preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p>Duration & first frame loaded</p>
</div>
<div class="video-container">
<h3>Preload: auto</h3>
<video width="200" height="150" controls preload="auto">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p>Entire video loaded</p>
</div>
</body>
</html>
This example shows three identical videos with different preload settings, demonstrating how each setting affects the initial loading behavior.
Return Value
The preload property returns a string representing the current preload setting. The returned value will be one of the following −
"none"− No video data should be preloaded"metadata"− Only video metadata should be preloaded"auto"− The entire video should be preloaded
Browser Compatibility
The HTML DOM Video preload property is supported in all modern browsers. However, browsers may ignore the preload hint based on user preferences, network conditions, or data saving modes. Mobile browsers often ignore preload="auto" to conserve bandwidth.
Key Points
The preload property is a hint to the browser and may be ignored in certain conditions
Use
"none"for mobile-friendly, data-conscious applicationsUse
"metadata"for a balanced approach (default behavior)Use
"auto"only when you expect users to play the video and have good connectivityThe property can be changed dynamically using JavaScript after page load
Conclusion
The HTML DOM Video preload property provides control over when video data loads, helping balance user experience and bandwidth usage. Use "none" for data savings, "metadata" for balanced loading, and "auto" for immediate playback readiness. Remember that browsers may override this setting based on user preferences or network conditions.
211 Views
