Thanks mainly to Apple and their squabble with Adobe, there is a lot of talk at the moment about HTML5 and the future of the web. We have been told that HTML5 is the future of video on the web, and a quick google search will bring up a ton of examples of the cool stuff you can do.
Couldn't find a good image to represent HTML5 so went for the 'Dramatic Gopher'
But here’s the rub. HTML5 is still under development, people are still arguing over whether there should be a space between “HTML” and “5″ or not, and any current implementations could possibly change in the future. HTML5 is expected to reach Candidate Recommendation sometime in 2012, and finally become a W3C Recommendation sometime in 2022!
Having said that many browsers are implementing lot’s of the proposed features of HTML5 such as canvas, the video element, and new semantic blocks such as <nav>, <footer> and <section>
And it is the video element we are interested in here. With the popularity of Apple’s iPhone and iPad devices, sites that use a lot of video are left with a problem. They are probably using Flash to display their video, and as you may well know Flash is not supported on these devices. HTML5 video is however.
There are a number of implementations of HTML5 video around on the web, some of the best are:
Projekktor (a free HTML5 video player) ()
Video JS (we used a version of this implemention using the Vimeo skin)
SublimeVideo by Jilion (not yet available but will be free for non-commercial use)
The problem now is that while HTML5 video is supported on The latest versions of safari/firefox/opera (and the BETA of IE9), it is not yet supported by internet explorer or older versions of those browsers. We also have the issue that the different browsers support different video formats.
I won’t go into details about the difference between video formats and containers, and which browsers support which formats (see the table on Wikipedia), suffice to say, if you wanted to support HTML5 in all available browsers, you could conceivably have to upload 4 versions of every video on your site – Ogg Theora, H.264, VP8(WebM) and Flash FLV as a fallback.
If you decide that this is the route you want to go down then Camen Design have a great post entitled Video for Everybody that you should check out. I would also recommend reading the excellent video on the web article on the Dive into HMTL5 site.
We decided on a different approach for one of our clients. We didn’t want to force them to upload 4 different files for every video on the site, and we were perfectly happy with playing video through flash on the main website. We just wanted to add support for their videos on Apple’s mobile devices, the iPhone and iPad, requiring that for every video we had a Flash FLV and an MP4 version. It was then a simple case of checking the useragent and serving the MP4 via the video element to apple mobile devices, and the flash version to everyone else.
One thing to remember is that the iPhone supports a maximum video resolution of 640×480, and videos over this size do not play (Arstechnica reckon you can get away with up to a 720×576 resolution, but i’ll leave that to you to play with)
Using this simple method we can ensure that video content is accessible for everyone viewing the site, including those using Apple’s mobile devices. And this accessibility is key for engaging audiences. With so many people using mobile devices to browse now, it’s important you capture the audience when they are interested – as chances are they will not be coming back on their PC to check out that video that didn’t load on their phone.
Tags Apple browsing clients development HTML html5 ipad iPhone mobile serving video web