How to Add Preview Image to a HTML Video

By default while the browser is downloading the video, nothing 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 image instead of showing nothing. 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() {
    this.setAttribute('poster', '');
});
How to Add Subtitles to HTML5 Videos
Maintaining Aspect Ratios for HTML Videos with CSS