How to Add Preview Image to a HTML Video

By default while the browser is downloading the video, a black screen will be shown as the initial preview for the video. Once the first frame of the video is fetched, the first frame is shown as the preview image.

However sometimes you would like to show a specific image as the preview of the video instead of showing a black screen (leading to a better user engagement). This can be done with the poster attribute of the video element.

You can specify the url to the image in the poster attribute. The browser will automatically insert a "play" icon in the center of the poster image.

<video id="player" poster="http://site.com/img.jpg" controls>
	<source src="/media/video.webm" type="video/webm">
	<source src="/media/video.mp4" type="video/mp4">
</video>

Showing the Poster Till the Browser Gets the Thumbnail

By default browser will show the first frame of the video as the thumbnail of the video. In some cases you may want to show a poster image only till the till browser gets the original thumbnail of the video.

This can be done using the onloadeddata event of the video element. This event will be fired once the first frame of the video has finished loading.

document.querySelector("#player").addEventListener('loadeddata', function() {
    // remove the poster now
	this.setAttribute('poster', '');
});