The HTML poster attribute specifies an image that will be displayed in the video player area while the video is downloading or until the user clicks the play button.
Definition and Usage
➔ The poster attribute is used exclusively with the <video> element.
➔ The main purpose of the poster attribute is to provide a visual thumbnail or placeholder image for the video content before the video plays.
➔ This improves the user experience by providing context before the video loads or plays.
➔ If the poster attribute is omitted, the browser will typically display the first frame of the video as the poster image.
Syntax
//In HTML
<video controls width="400" height="250" poster="myposter.jpg" id="sampleid">
<source src="myvideo1.mp4" type="video/mp4">
<source src="myvideo2.ogg" type="video/ogg">
This browser does not support the video tag.
</video>
//OR
<video controls width="400" height="250" poster="https://example.com/myposter.jpg" id="sampleid">
<source src="myvideo1.mp4" type="video/mp4">
<source src="myvideo2.ogg" type="video/ogg">
This browser does not support the video tag.
</video>
//In JavaScript
document.querySelector("#sampleid").poster="myposter.jpg";