HTML5 Video

Posted by: | Technical | 27.04.2011

Nigel Parker
Nigel Parker from Microsoft gave a fantastic talk at the MIX11 conference regarding HTML5 video (and audio). What does that mean? Well, the HTML5 specification, which is supported by newer browsers, contains a new tag which allows you to play video and audio in the browser, without requiring a plug-in such as Flash. This not only makes it much simpler for the developer, but provides a more consistent experience for the user. The idea is that if the video player technology is built into the browser itself, it should be more reliable. In the HTML code, this looks something like this:

Sample Video Mark Up

You can view full samples of this (assuming you are using an HTML5 capable browser) at Nigel’s demo site:

http://video.stickon.me/

Here is a summary of the key points from the presentation:

  • You can use services such as Archive.org or encoding.com for getting your video converted and encoded in the cloud, so you don’t need to do this on your server. This type of task is heavily intensive on server resources.
  • Windows Azure storage has some smart features if you host your video with them
  • If you host you host your own views, don’t forget you need to add custom mime types in your IIS web configuration, otherwise your video files won’t play.
  • Microsoft’s IIS web server supports bit rate throttling which lets you skip to anywhere in the video, which won’t be supported by default.
  • Microsoft IIS has different encoding settings support available, including three H.264 profiles:
    • Baseline
    • Main
    • High
  • You can convert your videos to the correct formats using Microsoft Expression Encoder 4

You can apply styling with canvas and CSS. Basically this is like using sprites for mouseover images, a technique we have used for a while. It is important to note that not all browsers support CSS for the video element

There are a number of drawbacks to HTML5 video though, namely:

  • No DRM
  • No fullscreen
  • No live streaming
  • Inconsistent browser support

Nigel put together a matrix to show the different support for different video codecs:

Audio and Video Codecs Browser Support

You need multiple codecs to get good cross browser cross device support you also need to consider low res and high res versions.

Nigel was being diplomatic, but basically it is a bit of a mess. Apple, Abode and Google are all trying to push their own live streaming video codecs, and this makes it difficult for developers, as you have to convert your video to multiple formats and also handle inconsistencies with styling of the player if you need to support multiple browsers. This is all going to make it too hard, and lead to a slower adoption, of what is ultimately a superior solution for online video.

Leave a Reply