Our very own Martin Beeby has been exploring HTML5 and created some tips and tricks to help you if you’ve not yet dabbled in HTML5. Martin is a Developer Evangelist for Microsoft and his illustrious career to date involves karate, school bands and chess. In his own words, ‘I like indie music, design and snowboarding. I like to mention snowboarding because it makes me sound cool. I wouldn’t want to mention the fact I like chess, programming philosophy, and math puzzles; because that might make me sound like a geek’. Enjoy!
How to play video in HTML5
On Friday I was manning the HTML5 stand at the dConstruct event in Brighton. I was genuinely knocked-out by the level of interest that people were showing in HTML5 and IE9. Although there were many experts amongst the people I spoke to there were a few that had never used HTML5 and weren’t really sure of what they could achieve with it.
I thought it might be a good idea to run through the basics for people that have not been following the Buzz around HTML5. Where better to start I thought than the new Video Tag.
Until recently if you wanted to play video on your website you had to use a plug-in like Flash or Silverlight. HTML5 now gives you the option of playing video by just using a HTML tag:
All we really need to add is the source tag of the video that we want to play. We can also add an optional controls attribute to specify if the play, pause and stop controls should be shown or not.
Now there is the small matter of what video formats can be supported… here’s the rub. The current HTML5 draft specification no longer specifies a video codec that must be used and so the various HTML5 browser manufacturers have chosen which formats they will and won’t support.
H.264 is what most sites currently use to encode their Flash Video. It is supported for HTML5 by Internet Explorer Platform Preview, Safari and Google Chrome whilst Firefox has lumped to support only Ogg Theora a codec that neither Safari nor Internet Explorer Platform Preview currently support. Ogg Theora was previously the standard codec in the HTML5 specification but was removed.
It’s quite a minor task to support both codecs, in the code snippet above I encoded the same video in both formats and simply added a source tag for both video types. Therefore in theory all HTML5 browsers should be able to play the video.
To see a demo of the video playing visit http://www.thewayithink.co.uk/html5/video.html and remember to use a HTML5 compliant browser. If you don’t have currently, why not install the Internet Explorer Platform Preview.
In this demo I used the following tools to encode the video:
MP4 – http://handbrake.fr/