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
Selected Reading
HTML5 preload attribute
The HTML5 preload attribute controls how much video or audio content should be loaded when the page loads, before the user plays the media. This helps optimize page loading performance and user experience.
Syntax
<video preload="value"> <audio preload="value">
Preload Values
| Value | Behavior | Use Case |
|---|---|---|
none |
No data is loaded until user plays | Save bandwidth, slow connections |
metadata |
Only duration, dimensions loaded | Show video info without full download |
auto |
Entire media file is downloaded | Media likely to be played immediately |
Example: No Preload
<!DOCTYPE html>
<html>
<body>
<video width="350" height="200" controls preload="none">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Example: Metadata Only
<!DOCTYPE html>
<html>
<body>
<video width="350" height="200" controls preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
JavaScript Control
<script>
// Get video element
const video = document.querySelector('video');
// Check current preload setting
console.log(video.preload); // "none", "metadata", or "auto"
// Change preload dynamically
video.preload = "metadata";
</script>
Browser Behavior
Different browsers may ignore the preload attribute based on user settings or data-saving modes. Mobile browsers often default to none regardless of the attribute value to conserve bandwidth.
Conclusion
Use preload="none" to prevent automatic downloading and save bandwidth. Set preload="metadata" to show video duration and dimensions without downloading the full file.
Updated on: 2026-03-15T23:18:59+05:30
187 Views
Advertisements