Including video into your website using the new HTML element

Last updated on by cjh

Including your video in your web page with the new HTML <video> element

A new HTML element, the aptly named <video> element, was introduced into the HTML 5 specification as an easy to use method for embedding a video into a web page without the need for plug-ins, such as Flash or Silverlight.

This article is a gentle introduction to the <video> element, and how to make use of it in a web page. It isn’t to try and convince you to drop Flash video over HTML5 <video> (those decisions are down to you) it is merely highlighting the elements existence and its uses. While not included as part of this article, the <audio> HTML element also exists, which has the same uses as the <video> element, but is aimed at including audio files.

The HTML 5 <video> element

The aim for the <video> element was to make video a full part of the web document, so that it could be manipulated via JavaScript and CSS in the same way other HTML elements can be, which has been relatively successful, as all the major web browsers now support it.

Another aim was to have a single, free, video format to go along with the <video> element, but during the course of the HTML 5 discussions, a single format could not be agreed on, for a number of reasons, and so no single format is defined for use with the <video> element.

Video formats - MP4 and WebM

Web browser developers are free to choose which formats to natively support, and currently the two most widely used video formats that are used with the <video> element are the well-known MP4 (H.264 codec) format and the perhaps lesser-known WebM (VP8 & VP9 codec) format.

The H.264 codec was chosen by Apple and Microsoft because it is widely used, it can produce high-quality video very efficiently, and has a lot of hardware-based support on computers and mobiles. Internet Explorer 9 and 10, Safari, Google Chrome*, Android, and the iRange from Apple all support the inclusion of an MP4 (H.264) video directly in the web page using the <video> element, but because it requires a fee based licence for a lot of its use, wasn’t the preferred choice by some other developers.

WebM (VP8, VP9), on the other hand, is a royalty-free open codec released by Google after it purchased the company that developed it (On2), and is used by Google Chrome*, Firefox, Opera and Android. WebM isn’t selected by Apple, Microsoft and others because it is perceived to be of lesser quality than H264 and has significantly less hardware support, while also not being considered safe from possible patent infringement – although, native WebM playback is possible for Internet Explorer via the WebM media framework.

A third video format, Theora, is also usable in most browsers that support WebM, but its use is expected to shrink with the uptake of WebM. You may also be surprised to learn than Internet Explorer does not support the use of Microsoft's own "wmv" video files via the <video> element.

Whichever video format is used, the browser will include all the standard video controls, such as play, pause, volume control and seeking, you don’t need to do anything other than include the reference to your video.

The use of the <video> element has been relatively low since its introduction, mostly because the use of Flash video was so widespread, but ever since Apple chose not to include the use of Flash in their mobile products, the <video> element has been used more and more in web sites.

Including a video with <video>

The syntax is pretty straightforward for anybody who knows HTML. The tag name is video, and the standard attributes you’ll mostly use are "src" (for a single video format) and "controls", not dissimilar to including an image, as shown below:

<img src="photo.jpg" alt="an image">
<video src="video.mp4" controls></video>

The above example would include a video player within the web browser, referencing the video file called video.mp4 using the "src" attribute, awaiting the user to watch. The attribute "controls" tells the browser to include the video player controls on screen.

Video controls

The automatic inclusion of video controls might seem obvious, but being able to remove the browser controls enables web developers to create their own, customized video players via CSS and JavaScript, which a lot like to do, but won’t be covered in this little introduction to the <video> element.

Attributes such as "controls" is a true / false attribute, meaning its presence alone is enough to trigger the setting. In xHTML, you would write the attribute slightly differently, as xHTML requires all attributes to include a value. Most examples you’ll find on the web would be written like this:

<video src="video.mp4" controls="controls"></video>

Technically because the attribute is a true / false setting (in that if it’s there it’s true, if it’s not it’s false), then you could write whatever value you liked. The following example would also work:

<video src="video.mp4" controls="I would like controls added to my video please"></video>

However, for this article, and most cases, the attribute name is all that will be required to apply the desired setting to your video.

Browsers that don't support the HTML 5 <video> element

For web browser that don’t support the <video> element, you can place information between the opening and closing <video> tags, such as:

<video src="video.mp4" controls>
<p>Sorry, no video for you today!</p>
</video>

Web browsers that don’t know how to interpret the <video> element will just use whatever it sees in-between the opening and closing <video> tags, which in the above example is a paragraph of text indicating that video playback isn’t available.

A common approach to browsers that don’t support the <video> element is to have a flash video player as the back-up, or a link to the video directly, such as:

<video src="video.mp4" controls>
<p>Please download and watch our <a href="video.mp4">promotional video clip</a></p>
 </video>
The poster attribute

Before the video is played, you can select an image to use as a placeholder by setting the address of the image using the "poster" attribute. If the "poster" attribute is not set, the first frame of the video will be displayed until it is played, which might not be as visually pleasing as a pre-selected image, which is quite often a simple screen-grab of the video in question.

<video src="video.mp4" poster="video.jpg" controls>
<p>Please download and watch our <a href="video.mp4">promotional video clip</a></p>
</video>

Video dimensions

Setting the "width" and "height" attributes allows is the same as if setting these for an image. The difference is that if the width and height do not match the videos aspect ratio, then the video will be resized to preserve the correct aspect ratio, rather than stretching the picture:

<video src="video.mp4" poster="video.jpg" height="480" width="270" controls>
<p>Please download and watch our <a href="video.mp4">promotional video clip</a></p>
</video>

Automatic video playback and looping

If you want the video to play as soon as possible, without the user needing to press play, you can set the "autoplay" attribute, and if you’d also like the video to loop over and over once it has finished playing you can set the "loop" attribute:

<video src="video.mp4" poster="video.jpg" height="480" width="270" controls autoplay loop>
<p>Please download and watch our <a href="video.mp4">promotional video clip</a></p>
</video>
Preloading video

There is also the "preload" attribute, which enables the video to be possibly preloaded before being played. This attribute is not a true / false attribute, so must be assigned one of three values, either "auto" (possible preload of the whole video), "metadata" (preload only the metadata of the video), or "none" (no preload is to be done). The "auto" setting is to allow the web browser to possibly download the whole video, and the browser will make the choice to do so or not, but there is no forced preload option:

<video src="video.mp4" poster="video.jpg" height="480" width="270" preload="auto" controls autoplay loop>
<p>Please download and watch our <a href="video.mp4">promotional video clip</a></p>
</video>

Multiple video files

As mentioned above, there are currently two video formats that are mainly being used alongside the <video> element. Luckily, the <video> element allows for multiple source videos to be referenced using the <source> element inside a <video> element, so if you choose to have an MP4 and WebM (and maybe even a Theora) version of your video to allow for a greater audience, you can remove the single src attribute from the <video> element and instead create a separate <source> element for each video:

<video poster="video.jpg" height="480" width="270" preload="auto" controls autoplay loop>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<p>Please download and watch our <a href="video.mp4">promotional video clip</a></p>
</video>

Web browsers will play the first video format it comes to which it supports, so for example, Internet Explorer will play the MP4 video, while Firefox will play the WebM video. There is no set limit to how many <source> elements you can include, and future video formats can easily be added to the list.

The "type" attribute defines the type of video being referenced. It is important that your web server sends out the correct metadata for your video file, as if it doesn’t the browser might not recognise the video it is receiving, and thus won’t play it. You can also specify which video and audio codec you have used in each case, though this shouldn’t be necessary. To do so however, you need to use single quotes within the "type" attribute, and double quotes around the video and audio codec information:

<video poster="video.jpg" height="480" width="270" preload="auto" controls autoplay loop>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8,vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora,vorbis"'> 
<p>Please download and watch our <a href="video.mp4">promotional video clip</a></p>
</video>
Creating additional video files

While it opens up your audience, creating a copy of your video in a second or third format can be troublesome if you’ve simply recorded a quick MP4 from your mobile or camera, but a basic video converter program called Miro Video Converter can easily create a WebM (and Theora) version of your video for you.

And we're done

And there we have the basics of the new HTML 5 element. As mentioned, a lot more can be done with CSS and JavaScript to make a custom video player, and there are many HTML 5 video players available online that can be downloaded, customised and integrated in to your web site.

Deciding whether to use the <video> element, Flash, or a combination of the two is down to you. Using both opens up your content to a wider audience, but might take a little extra effort to put together if you’ve not done it before, or had much experience with using other people’s scripts / frameworks.


Did you find this article helpful?