Five for 5: Five cool things you can do with the HTML 5 video element

Standard

The ability to embed video directly into an HTML5 page is pretty awesome. As a first class citizen in the HTML5 enabled browser, video is no longer an ‘outsider’ and so you can actually do some relatively cool things without any particular effort. Below, I examine five common things that you’d previously have had to solve with a reasonable degree of complexity.

#1 Specifying multiple file formats

Let’s take a sample player:

<video width="320" height="240" controls="controls">
<source src="video.ogg" type="video/ogg" />
Sorry, your browser does not support the video tag.
</video>

This works great, but only if the client can play Ogg video. If you have multiple formats of the same media, you can offer them up to the HTML5 video player as well and it will pick the first one which the client can play. It’s a little bit of magic, really:

<video width="320" height="240" controls="controls">
<source src="video.ogg" type="video/ogg" media="screen" />
<source src="video.mp4" type="video/mp4" media="screen" />
<source src="video.webm" type="video/webm" media="screen" />
Sorry, your browser does not support the video tag.
</video>

Pretty neat, don’t you think? Now, rather than giving up when the .ogg video cannot be played, the player will check to see if .mp4 or .webm videos can first be played, too.

#2 Specifying differently encoded media for different devices

So we’ve got our multiple-format player. But can we extend this further so that we can choose different video based on the capabilities of the particular client making the request? The answer is Yes.

Let’s assume we have ‘movie-hi.ogg’ and ‘movie-lo.ogg’ – both are essentially the same video but one is optimised for small screen and the other is optimised for a full HD experience. We can have the HTML5 video player figure out which one to load using source media attributes:

<video width="320" height="240" controls="controls">
<source src="movie-lo.ogg" type="video/ogg" media="screen and (min-width:320px)" />
<source src="movie-hi.ogg" type="video/mp4" media="screen and (min-width:720px)" />
Sorry, your browser does not support the video tag.
</video>

Let’s take a closer look at the media attribute. The screen keyword tells the HTMl5 video player we’re targeting computer screens, rather than say braille which would target braille feedback devices.  Next, we’ve got the boolean operator and which connects the statement on the left with the statement on the right, so that if both conditions are true the statement is satisfied and that will be the source element we use (you could replace and with not or a comma – which signifies the ‘or’ operator). Finally, we have the min-width selector, which could just as easily be max-width or min-height, for example. [There’s a big list of all the currently supported filter values over at w3schools).

#3 Making pages with video load faster

The HTMl5 video tag will attempt to pre-load the contents of the video element on page load by default. You can change this behaviour so that is loaded on-demand, by adding the preload attribute with the value none to the video element:

<video width="320" height="240" controls="controls" preload="none">
<source src="movie-lo.ogg" type="video/ogg" media="screen and (min-width:320px)" />
Sorry, your browser does not support the video tag.
</video>

#4 Using an image as a placeholder for video while it is loading

Using a single frame from somewhere within the video can be a nice way to give a user a hint of what the video contains. It’s also a great way to fill the video container with something relevant while the video is still loading in the background. Fortunately, this is nice and easy to do. Just add the poster attribute to the video element:

<video width="320" height="240" controls="controls" poster="image.jpg">
<source src="movie-lo.ogg" type="video/ogg" media="screen and (min-width:320px)" />
Your browser does not support the video tag.
</video>

#5 Execute custom javascript code triggered by video player events

As a first-class citizen in HTML5, the video element has a full-featured javascript event model that you can hook into in order to execute your own custom code. Here are a selection of my favourites:

  • oncanplay – fires whenever the media can start to play
  • onended – fires when the media has reached the end
  • onprogress – fires whenever the browser requests media from the server
Using these events, it is possible to hook into the video element to create a very rich, interactive UI that extends out of the video frame itself. This very extensible model gives you a lot of freedom to create!
About these ads