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
How do we set an image to be shown while the video is downloading in HTML?
In this article we are going to learn about how to set an image to be shown while the video is downloading in HTML using the poster attribute.
The HTML poster attribute allows developers to display a custom image before the video starts playing. This image is shown while the video is downloading or until the user clicks the play button. If the poster attribute is not specified, the browser displays the first frame of the video as the default thumbnail.
Syntax
Following is the syntax for the HTML poster attribute −
<video poster="URL" controls> <source src="video.mp4" type="video/mp4"> </video>
The poster attribute accepts a URL pointing to an image file. Supported image formats include JPEG, PNG, GIF, and WebP.
Key Features of the Poster Attribute
The poster attribute provides several important benefits −
Visual preview − Shows a meaningful image representing the video content before playback begins.
Loading placeholder − Displays while the video file is downloading, providing immediate visual feedback to users.
Bandwidth optimization − Reduces initial data usage since only the poster image loads, not the video file.
Professional appearance − Creates a polished interface with custom thumbnails instead of random first frames.
Using Video with Poster Attribute
Example
Following example demonstrates a video element with a poster image −
<!DOCTYPE html>
<html>
<head>
<title>Video with Poster</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Sample Video with Poster Image</h2>
<video width="400" height="300" controls poster="https://www.tutorialspoint.com/static/images/logo-color.png">
<source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
The output displays a video player with the TutorialsPoint logo as the poster image before playback begins −
[Video player showing TutorialsPoint logo with play button overlay] Width: 400px, Height: 300px
Comparing Videos With and Without Poster
Example
Following example shows two videos side by side to demonstrate the difference −
<!DOCTYPE html>
<html>
<head>
<title>Poster Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Video with Poster vs Without Poster</h2>
<div style="display: inline-block; margin: 10px;">
<h3>With Poster</h3>
<video width="320" height="200" controls poster="https://www.tutorialspoint.com/images/logo.png">
<source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
</video>
</div>
<div style="display: inline-block; margin: 10px;">
<h3>Without Poster</h3>
<video width="320" height="200" controls>
<source src="https://samplelib.com/lib/preview/mp4/sample-30s.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
The first video shows a custom poster image, while the second video displays its first frame as the default thumbnail.
With Poster Without Poster [Custom logo image] [First video frame]
Best Practices for Poster Images
When implementing poster images, consider the following guidelines −
Aspect ratio − Match the poster image aspect ratio with the video dimensions to prevent distortion.
File size − Use optimized images (under 100KB) to ensure fast loading.
Representative content − Choose images that accurately represent the video content.
High quality − Use high-resolution images that look crisp on different screen sizes.
Example − Responsive Video with Poster
Following example shows a responsive video implementation with proper poster sizing −
<!DOCTYPE html>
<html>
<head>
<title>Responsive Video with Poster</title>
<style>
.video-container {
max-width: 600px;
margin: 0 auto;
position: relative;
}
.responsive-video {
width: 100%;
height: auto;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Responsive Video Player</h2>
<div class="video-container">
<video class="responsive-video" controls poster="https://www.tutorialspoint.com/static/images/logo-color.png">
<source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
<p>Your browser doesn't support HTML video. <a href="https://samplelib.com/lib/preview/mp4/sample-5s.mp4">Download the video</a> instead.</p>
</video>
</div>
</body>
</html>
This creates a video player that scales with the container while maintaining the poster image quality across different screen sizes.
Conclusion
The poster attribute is essential for creating professional video presentations in HTML. It provides users with immediate visual feedback while the video downloads and allows developers to showcase representative thumbnails instead of random first frames. Always use optimized, high-quality images that match your video's aspect ratio for the best user experience.
518 Views
