Getting Started with HTML5 Video

video-feature

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.

Video Formats

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.

Chrome Firefox Opera Safari IE9+
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 height and 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 <source> elements.


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.

Video Attributes

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

The 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>
The default video controls in Google Chrome

The default video controls in Google Chrome.

loop

When the 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

The 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

The 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

Applying the 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>

Note: There is an API available that allows you to control video playback using JavaScript. How to use this API falls outside the scope of this blog post but if you are interested check out this page on the Mozilla Developer Network.


Final Thoughts

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.

Useful Links

Comments

2 comments on “Getting Started with HTML5 Video

  1. Hi Matt ,
    I am using camera api of html5 ,it is running well on opera and chrome but not able to run on other browsers.Please help me out of this issue.

    Thanks,

    Anand