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 poster Property
The HTML DOM Video poster property returns or sets the URL of an image that is displayed as a placeholder before the video starts playing or while the video is loading. This property corresponds to the poster attribute of the HTML <video> element.
Syntax
Following is the syntax for getting the poster URL −
mediaObject.poster
Following is the syntax for setting the poster URL −
mediaObject.poster = URLString
Where mediaObject is a reference to the video element and URLString is the path or URL to the image file.
Parameters
URLString − A string containing the URL or path to the image file that will be used as the video poster. If set to an empty string, the first frame of the video will be used as the poster.
Return Value
The property returns a string representing the current poster image URL. If no poster is set, it returns an empty string.
Example − Getting Video Poster URL
Following example demonstrates how to get the current poster URL of a video element −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video poster Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Video Poster Property Example</h2>
<video id="videoDemo" width="320" height="240" controls poster="/html/images/logo.png">
<source src="/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="getPosterURL()">Get Poster URL</button>
<p id="result"></p>
<script>
function getPosterURL() {
var video = document.getElementById("videoDemo");
var posterURL = video.poster;
if (posterURL === '') {
document.getElementById("result").textContent = "No poster set - first frame will be used";
} else {
document.getElementById("result").textContent = "Poster URL: " + posterURL;
}
}
</script>
</body>
</html>
The output displays the video with a poster image and shows the poster URL when the button is clicked −
Poster URL: /html/images/logo.png
Example − Setting Video Poster URL
Following example shows how to dynamically change the poster image of a video element −
<!DOCTYPE html>
<html>
<head>
<title>Setting Video Poster</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Dynamic Poster Change</h2>
<video id="myVideo" width="320" height="240" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="setPoster1()">Set Poster 1</button>
<button onclick="setPoster2()">Set Poster 2</button>
<button onclick="removePoster()">Remove Poster</button>
<p id="status"></p>
<script>
var video = document.getElementById("myVideo");
function setPoster1() {
video.poster = "/html/images/poster1.jpg";
document.getElementById("status").textContent = "Poster set to: poster1.jpg";
}
function setPoster2() {
video.poster = "/html/images/poster2.jpg";
document.getElementById("status").textContent = "Poster set to: poster2.jpg";
}
function removePoster() {
video.poster = "";
document.getElementById("status").textContent = "Poster removed - first frame will be used";
}
</script>
</body>
</html>
The buttons allow you to dynamically change or remove the poster image. When the poster is removed, the first frame of the video becomes the poster −
Poster set to: poster1.jpg (or) Poster removed - first frame will be used
Example − Checking Poster Status
Following example demonstrates checking whether a video has a poster and handling different scenarios −
<!DOCTYPE html>
<html>
<head>
<title>Video Poster Status Check</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Poster Status</h2>
<div style="margin: 20px 0; text-align: center;">
<video id="videoWithPoster" width="280" height="160" controls poster="/html/images/video-poster.jpg">
<source src="/html/mov_bbb.mp4" type="video/mp4">
</video>
<br>
<button onclick="checkPoster('videoWithPoster', 'result1')">Check This Video</button>
<p id="result1"></p>
</div>
<div style="margin: 20px 0; text-align: center;">
<video id="videoNoPoster" width="280" height="160" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
</video>
<br>
<button onclick="checkPoster('videoNoPoster', 'result2')">Check This Video</button>
<p id="result2"></p>
</div>
<script>
function checkPoster(videoId, resultId) {
var video = document.getElementById(videoId);
var resultElement = document.getElementById(resultId);
if (video.poster && video.poster !== '') {
resultElement.textContent = "? Has poster: " + video.poster;
resultElement.style.color = "green";
} else {
resultElement.textContent = "? No poster set - using first frame";
resultElement.style.color = "orange";
}
}
</script>
</body>
</html>
This example shows two videos − one with a poster and one without, demonstrating the different states −
? Has poster: /html/images/video-poster.jpg ? No poster set - using first frame
Key Points
The poster property accepts both relative and absolute URLs to image files.
Common image formats for posters include JPEG, PNG, GIF, and WebP.
If no poster is specified or the poster is set to an empty string, the browser displays the first frame of the video.
The poster image is only visible before the video starts playing and while the video is loading.
Changing the poster property dynamically will immediately update the displayed poster image.
The poster property corresponds directly to the HTML
posterattribute.
Browser Compatibility
The Video poster property is supported in all modern browsers that support HTML5 video, including Chrome, Firefox, Safari, Edge, and Opera. The property has been available since the introduction of HTML5 video elements.
Conclusion
The HTML DOM Video poster property provides a simple way to get and set the placeholder image for video elements. It enhances user experience by displaying meaningful thumbnails before video playback begins. When no poster is set, the browser automatically uses the first frame of the video as the poster image.
193 Views
