HTML 5 <video> element test

This is an example of how you can make use of the HTML 5 <video> element in a web page to include a video clip, without the need for Flash or Silverlight to be installed in the browser.

The clip above is encoded in the H.264, WebM and Theora video formats - Theora is used as a third format option to make the video clip available to older version of the Opera and Firefox web browsers, as these two do not currently support WebM video.

The code used to include a video is:
<video width="480" height="270" poster="html5-video-element-test.png" controls>
<source src="html5-video-element-test.mp4" type="video/mp4"><!-- Better quality, so use first. -->
<source src="html5-video-element-test.webm" type="video/webm">
<source src="html5-video-element-test.ogg" type="video/ogg">
<p class="nohtmlvid">Sorry, your web browser does not support the HTML 5 <video> element! You may <a href="html5-video-element-test.mp4" type="video/mp4" title="Video sample">download the video</a>.</p>
</video>


The poster attribute allows a still image to be in place while the video is not yet playing, while the controls attribute tells the web browser to show its own play / pause (etc) control panel over the video. You can create your own using JavaScript if you prefer.

The <source> element is used inside the <video> element to list the video file that you would like shown. If a web browser can’t play the first video file (e.g. because it is in an unsupported format) it’ll try the next. If it can’t play any, or doesn’t support the <video> element at all, it’ll display whatever content is within the <video> element code, which in this example, is the text Sorry, your web browser does not support the HTML 5 <video> element!.

In this example, the H.264 video file was listed first, as it is of better quality.

If you do not have multiple video formats, you can replace the multiple source elements with a single src attribute inside the <video> element, such as:
<video width="480" height="270" src="html5-video-element-test.mp4" poster="video-element-test.png" controls>
<p class="nohtmlvid">Sorry, your web browser does not support the HTML 5 <video> element!</p>
</video>


For an introduction on how to use the HTML <video> element on your web site, see Including video into your website using the new HTML <video> element.