Until fairly recently web developers have been largely dependent on plugins like Adobe Flash or Microsoft Silverlight when adding video content to their web pages. Whilst these plugins meet the requirements of the task at hand, the approach of having to rely on a plugin for things like video is flawed.
Why can’t the browser just handle playing video? When YouTube was founded in 2005, native video playback just simply wasn’t an option but today there is a solution and it’s called HTML5 video.
In this blog post you are going to learn how to add native video to your web pages using technologies introduced in HTML5.
The first stop on our journey to the shangri-la of native video is to look at formats. There are three main video formats supported by browsers. These are WebM, MP4 and OGV. As you can see from the table below, there is no single video format that is supported by all the major browsers.
|WebM (VP8 Codec)||Yes||Yes||Yes||No||Yes|
|MP4 (H.264 Codec)||Yes||No||No||Yes||Yes|
|OGV (Ogg Theora Codec)||Yes||Yes||Yes||No||No|
If you want to ensure that your users will be able to play your videos you are best to use both the WebM and MP4 formats. You will learn how to specify multiple file formats later in this post.
Note: Firefogg is a really handy tool for converting your video files into various web formats.
Now that you are aware of the formats that your videos need to be provided in, lets move swiftly on to how you actually embed video.
The <video> Element
To embed native video in your web pages you need to use the new
<video> element. Browsers that support HTML5 video will attempt to load the video from the path that you specify in the
src attribute. Just as it would load a picture when you use the
<img> element. You can specify
width attributes to set the dimensions of the video. Note that unlike an
<img> element the
<video> element does require a closing tag.
<video src="my-video.webm" width="400" height="200"></video>
The example above shows a basic
<video> element specifying a single video file. However, you have already learned earlier in this post that you need to supply multiple formats of your video in order to ensure playback support in all major browsers. To supply multiple versions of your video you need to use
<source> elements. These should be placed inside your
<video> element and should each contain a path to a version of your video file (using the
src attribute) and a
type attribute that specifies the format.
<source src="my-video.webm" type="video/webm">
When the web browser encounters a
<video> element with multiple sources it will select the first file that it knows how to play, ignoring any others. You can also add fallback content to the bottom of your
<video> elements. This content will be displayed if the user’s browser does not support HTML5 video.
Note: If a user’s browser does support HTML5 video but cannot play any of the files that you provide it will not display the fallback content.
In the example below I have used multiple
<source> elements to provide different formats of the video. The fallback content used here is just a simple link to download the video. You could also add some code that will fallback to using a plugin like Flash for video playback.
Your browser doesn't support HTML5 video. Download the video instead.
Note: Remember to drop the
src attribute from your
<video> tag if you are using
Okay, so that covers the basics of adding video to your web pages. Pretty simple really. Now lets take a look at some of the attributes that you can use to control the behaviour of your video.
In this section you are going to learn about a number of attributes that you can apply to your
<video> elements to control built-in browser functionality.
controls attribute is used to instruct the browser to display its default playback controls for the video (as seen in the figure below). By default the browser will not display any controls. It is worth noting that the design of these controls is not standardized and varies between browsers.
<video src="my-video.webm" width="400" height="200" controls></video>
loop attribute is applied to your
<video> element the browser will automatically restart the video when it finishes.
<video src="my-video.webm" width="400" height="200" loop></video>
poster attribute is used to specify a path to an image that should be displayed in place of your video until the user clicks the play button. This could be a promotional image or a particularly fantastic frame from your video that will grab the attention of anyone browsing your web page. If you do not specify a poster image the browser may just display a black box filling the dimensions of the
<video> element. Some browsers may use the first frame of the video however this behaviour is not always consistent.
<video src="my-video.webm" width="400" height="200" poster="featured-frame.png"></video>
muted attribute is pretty self-explanatory. Using this attribute will instruct the browser to mute the video when the page loads.
<video src="my-video.webm" width="400" height="200" muted></video>
autoplay attribute will cause playback to start as soon as the web page finishes loading. Whilst this attribute does have a few legitimate uses it can also be used for evil! Setting a video to autoplay can be annoying to users as it interrupts their focus. Especially if the video includes audio. If you absolutely must use the
autoplay attribute consider also applying the
muted attribute to minimize the impact that this will have on the user experience.
<video src="my-video.webm" width="400" height="200" autoplay muted></video>
HTML5 video promises to solve a lot of headaches for web developers that need to reliably embed video content into their web pages. Whilst this is all new in HTML5, browser adoption has been very good. All of the major browsers are supporting HTML5 video in some form. If you still have users on older versions of Internet Explorer it may be worth adding a Flash fallback but it’s certainly safe to go out and start using HTML5 video today.
Are you using HTML5 video in your projects? Let us know in the comments below.