HTML5 video

Posted by

HTML5 Video

In this blogpost I will show some simple examples of how easy it is to start using the HTML5 video standard. Some of the challenges surrounding this will also be adressed.

Why HTML5 video?

The flash players have done the same job for years now, so why change the approach? The flash players require the external flash plugin to work, usually not a big issue as most people have this installed. However as Apple has decided not to support flash on iPhone and iPad alternative solutions must be taken into consideration. In addition flash players are usually not very customizable, often customers want both design and functionality that is not easily implemented in the flash players.

HTML5 video is a new standard for video on web, and embracing and following standards are usually a good thing. This means no external plugins will be needed, and the functionality will be native in all future browsers (both mobile and desktop). For the older browsers making a fallback is easy. If you want to be really mean you can just provide them with a link so they have to download it if they have a less capable browser. (Well that is what you get for using your grandpas browser..)

Using the native video capabilities of the browsers also ensures making highly customized players can be done easily. A javascript API is also available, which means custom functionality can be made as well. This can be done for example by manipulating video by using the new canvas drawing capabilities. 

Some examples

This example shows what is needed of markup to provide three different formats, as well as a fallback link if the browser does not support html5 video. This will create video player with the default controls provided by the browser.

Omitting the controls attribute you can also create fully customized video controls.

This is a minimalist example of what is needed to start a video playing. By having access to the different javascript apis it is simple to build highly customized functions.

Following is a simple example showing how to display a video in a canvas using an Andy Warhol inspired layout.


The example simply uses a canvas to draw four squares which mirrors the video and draws a color overlay. The canvas is simply updated on every timeupdate event received from the videoplayer, meaninge every second.

As you can see starting to use HTML5 video is fairly simple, and the possibilities it offers are limited by your own imagination. Coupled with the interesting new JavaScript APIs that are currently offered / under development some pretty amazing stuff can be achieved. Examples are video chat systems in the browser using the video and canvas elements. 
Beyond HTML5 - Conversational Voice and Video Implemented in WebKit GTK+  
WebRTC efforts underway at Mozilla!

Possible challenges

The biggest problem with using HTML5 video is that there is no standardized format yet. I won't go into the details on why, as that could be whole blogpost on its' own. What is important is to know about the three most important formats. Earlier you would need H.264, WebM (VP8) and Ogg Theora to target all the major browser. As things progress most browsers, except Internet Explorer now supports both WebM and Ogg Theora. This means that two formats are needed H.264 and either WebM or Ogg Theora.

Luckily there are tools available for encoding videos to the required formats. 

  1. Miro Video Converter -> GUI tool for encoding for different devices
  2. Command line tools, such as ffmpeg and so on
  3. External services, such as Zencoder

So at the moment a challenge is dealing with the format problem. Expecting the end users to upload a video in multiple formats is a big burden to put on the shoulders of the end users. Finding a solution for this is necessary to make HTML5 a feasible option. Finding a solution for this is however a different topic, and might be adressed in a follow up article.