An HTML video tag example with a preview image

By Alvin Alexander. Last updated: June 6, 2016

I needed to create an HTML5 video tag with a preview image for a recent project, and in short, here is the solution:

<!DOCTYPE html>
<html lang=en>

<head>
<title>Alison falling out of bed on Medium</title>
</head>

<body>

<h1>Alison falling out of bed on Medium</h1>

<video poster="PreviewImage.jpeg" width="640" height="480" controls="controls">
  <source src="AlisonFallingOutOfBed.webm" type="video/webm" />
  <source src="AlisonFallingOutOfBed.mp4" type="video/mp4" />
  <source src="AlisonFallingOutOfBed.theora.ogv" type="video/ogg" />
  Bummer, your  browser does not support the video tag.
</video>

</body>
</html>

Here's a very quick discussion of the code:

I put a file in the same directory as this HTML code named PreviewImage.jpeg. I used that image with the HTML5 video tag "poster" element, which makes that image the preview image for the video, i.e., what the user sees until they press the play button.
The preview image I used wasn't actually the same size as the video, but some combination of the HTML5 video tag and modern browsers do a nice job of making them look the same size.
I created several different versions of my video (WEBM , MP4, and OGG formats) to support multiple browsers, and put them all in the same directory. The video tag does its work, and only shows one video to the user.
The video tag "controls" element puts a nice play/pause control with the video. Very cool, a lot of functionality from one little tag.

I hope this HTML5 video tag with preview image example is helpful.

software-dev

An HTML video tag example with a preview image

books by alvin