Digithoughts

Part 1 – The HTML5 Video Element

Introduction

Welcome to the first part of a week long series looking at the HTML5 Video tag and how to skin it.

A lot of people are talking about how great HTML5 Video is, how it will be a game changer, and how it [debatably] does away with the need for Flash. Fewer are covering how to actually use it, and those that do tend to stop at showing you how to put the basic tag on to a page. That might be enough for casual bloggers and basic sites, but for it to stand any chance of replacing Flash on professional sites it needs to be able to replace Flash’s ability to skin the players as well. This week of articles will teach you how to do all of that.

We will be covering:

1. The HTML5 Video Element
2. Play Buttons
3. Rewind/Fast Forward
4. Interactive Progress Bars
5. Sound

Today, we are covering:

1. Getting Video On The Page
2. Handling The Format Soup
3. Failing Gracefully
4. Other Attributes

1. Getting Video On The Page

The <video> element, at its most basic, is as simple as an <img> element:

<video src="video.mp4" />

Unfortunately, that won’t do very much for you. The default behavior of a <video> element is not to play. It also doesn’t have any controls by default. Neither playing nor providing a means to make it play, it’s not a helpful element.

Adding Default Controls

Firefox at least provides some basic right click options (play, mute, full screen, turn on the default controls), as does Chrome (play, mute, loop). Safari offers nothing.

The attribute controls (with a value of "controls") turns on the default browser controls and gives control back to the user:

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

Auto Playing

Auto playing is as simple as setting the autoplay attribute to "autoplay":

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

2. Handling The Format Soup

The example, so far, will play on Chrome and Safari just fine but not Firefox or Opera (in most cases). The reason for this the well documented format war going on.

The Format War In 30 Seconds

H.264 (.mp4) is currently royalty free for web browsers but it is only promised free until 2016.

Large companies for whom browsers support their broader empires (Microsoft, Google, Safari) aren’t too concerned about this and support it. Those who focus their efforts on making free browsers first (Mozilla [Firefox], and Opera) don’t want to risk crippling royalty payments in the future.

Ogg Vorbis (.ogg) is and will continue to be royalty free (though some argument is made about it actually being vulnerable to patent claims in the future).

That makes it much more appealing to the smaller companies. Unfortunately, at least per Google’s claims, it is less efficient for the same quality of video and so providers like YouTube don’t want to pay the increased bandwidth costs. Thus the big companies who don’t care so much about potential costs in the future want H.264, not Ogg Vorbis.

And all of this may change when Google releases the free and better compressing VP8 format.

Who Supports What:

Giving The Browser Options

So far, we have been simply giving the browser a single src attribute:

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

Fortunately, the option exists to provide the browser with options and let it pick the one that is best for it, courtesy of the <source> element.

<video controls="controls">

<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

<source src="video.ogg" type='video/ogg; codecs="theora, vorbis"' />

</video>

In the above example, we are now offering both .mp4 and .ogg files, letting the browser pick whichever one is best for it.

Of course, that does mean you now have to provide two copies of every video – or use an automated transcoding service.

3. Failing Gracefully

If HTML5 <video> Is Not Supported

<video> has only been supported in Chrome 3+, Firefox 3.5+, Opera 10.5+ and Safari 3.1+ and Internet Explorer still doesn’t support it. What if users have an older browser? How do we let them know there is video available but they need to upgrade to see it?

Simple: Place text inside the <video></video> element. If the video renders, it will replace it. If <video> is not supported, it will be shown:

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

      This video requires a browser that supports HTML5 video.

</video>

If None Of Your Formats Are Supported

Providing video in every format might not be possible: it can be either time consuming to transcode manually or an additional cost to use an automated transcoding service.

It is also conceivable, though unlikely, that format support may go away in the future – say Ogg turns out to have hidden patents or Steve Jobs at Apple simply decides he’d prefer something different.

Catching, when none of your video formats are supported, is easy. All you have to do is add an onerror attribute to the last <source> element. If none of the video formats are supported, that JavaScript will then fire.

<video controls="controls">

      <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

      <source src="video.ogg" type='video/ogg; codecs="theora, vorbis"' onerror='alert("We are sorry: Your browser does not support any of the video formats available at this time.");' />

</video>

4. Other Attributes

So far we have covered the src, autoplay and loop attributes. There are several more that are pretty self explanatory that you may wish to use to enhance your basic <video> elements further. The full list is:

autoplay

As already covered, autoplay="autoplay" will cause the video to start playing automatically. Without it, video has to be manually started.

controls

Also already covered, controls="controls" turn on the default browser controls. Without it, the user may or may not have limited control through right clicking but the default controls will not appear.

height and width

Just as with <img> elements, you can force a width and height for your videos, causing them to scale if needed. In general, layout options should be handled via CSS but they are an option.

loop

loop="loop" tells the video to being playing again when it completes. Without it, it will stop when it reaches the end.

poster

poster lets you specify an image url to use as a poster image. This image will be displayed until the video is ready.

preload

This one is probably the most complicated. You have three options: "none", "metadata", "auto" (the default).

"none" – Do not load anything to do with the video until it is explicitly asked for. This saves server load but means the browser knows nothing about the dimensions or duration of the video and still has to load the entire thing before it can play.

"metadata" – Do not load the whole video but it is OK to get the dimensions, duration, first frame, etc. in order to prep the player. The rest will still have to be loaded once playing is requested. This provides at least some display whilst still saving server load.

"auto" – Let the browser do as it likes. It will get the metadata first and set up the player then do its best to load in the rest of the video in the background. This is great for usability but also pounds servers with every page load.

src

As already covered, the src attribute lets you specify a single video file to use. This keeps things simple if you are only offering one format but much better functionality is provided via the <source> elements.

Tomorrow:

Tomorrow we will be starting skinning, building a basic control pane and adding a play/pause button.

Resources:

The W3C spec for HTML5 video is available at:

http://www.w3.org/TR/html5/video.html

However, we would recommend the whatwg version as its linked table of contents makes it slightly more usable (even if the text is just as dense):

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html

Nicholas Davison Director of Web Development

Read more from the Engineering category. If you would like to leave a comment, click here: Comment or stay up to date with this post via RSS, or you can Trackback from your site.