I really need to think of a clever name for my blog

Fully cross platform video – HTML5 for iPad/iPhone with Flash fallback for older browsers

If, like me, you are a bit excited by the advent of native video and audio in HTML5, you are also probably apprehensive about cross platform support and backwards compatiblity.

The expolsion of iPlatforms without flash support is causing concern for many site owners – having spent enormous amounts of time and money creating and converting their videos to FLV for Flash video players, a lucrative demographic is now excluded from their content. HTML 5 promises a solution to this, but how best to implement it, and how to do it cheaply without investing in new software for conversion and delivery?

Luckily there are nutters out there who are already putting the hours in to create the solutions utilising Javascript to handle as many situations as possible..

I’ve tried two so far, and both have their pros and cons, as is to be expected.

It’s a pretty complicated sphere, and I’m not going into details here – GIYF, if you need to know more, but the information here should get you up and running in no time. Build either (or even both) solution into your own copy of HTML5 Boilerplate and I reckon you are really onto something…

VideoJS [★★★]

Simple, lightweight and easy to implement, VideoJS is a great solution for a single item player. I had this up and running in no time, with my eyes closed.VideoJS is either developed by or has been purchased by Zencoder. Thanks for that guys – cunning way to promote your paid-for encoding service! Makes sense really – make it easy for people to use video online and increase demand for your services…

http://videojs.com [new window]

Open Standard Media Player (OSM Player) [★★]

Complex, heavy, trickier to implement and sparsely docuemented, yet despite all this, based on my experience the jQuery driven OSM Player has massive potential. It’s much more feature rich, comes with a PHP implementation and if you are already using jQuery it’s nice to have something that fits in with your existing framework. This is one to keep an eye on in my opinion. I’d love to see all its parameters properly documented, but if you are prepared to dig under the hood it could be well worth the effort.

http://www.mediafront.org/project/osmplayer [new window]

[update 20110223-1140]

jPlayer [★★★★]

More features than VideoJS? Please.
More documentation and simpler implementation than OSM? Ta very muchly.
jQuery based? Why, ambassador… *flutters eyelids*
Worthy contender for the crown, with a few issues (IE is supported but why I can’t get it going in my initial implementation I do not yet know), jPlayer is, in general, right up my street. I like the coding style. The documentation is a bit spartan, but hardly required. Support forums are in place and in use. And their website is reasonably attractive and pleasant to use. All things that mark OSM down heavily, which considering OSM’s features is a tragedy. Get stuck in with jPlayer I say.

Note that for jPlayer’s Flash fallback to function it requires H.264/MP4 files to have an .m4v file extension – it doesn’t seem to support FLV video oddly for a flash player, but that does save you converting one more format.

http://www.jplayer.org [new window]

[/update]

[update 20110720-1625]

Projekktor [★★★]

Thought I would add this one in quickly (especially as this is one of my more popular posts) – I needed a player with easy YouTube support, and Projekktor did the job nicely. Very easy to implement, with some advanced features including playlists, skins and pre- and post-roll ads, with reasonable documentation. Well worth a shot if you want to get up and running quickly…

http://www.projekktor.com/ [new window]

[/update]

Converting your videos – Miro Video Converter

The important thing to remember is that you now need to provide at least THREE formats for every video – MP4, OGG and FLV.
This is because Safari (essential for those iPlatforms) and Chrome support MP4, Firefox and Opera support OGG. Oh my lord. Format wars? More on that in a minute.
The third format (FLV) is for older or obscure browsers. Which includes the latest Internet Explorer, because it is obviously both old and obscure. Or just plain awkward. Take your pick.

[update 20110223-1223]

For more on the format bunfight see my blog post on the subject

[/update]

Now assuming you already have all your old FLV videos, one quick and dirty solution is Miro Video Converter – this is a free and extremely simple utility that will output Theora (OGG) and H.264 (MP4/M4V) file. If you need to do batch conversions you will need to hunt out a better solution – as I am only testing my first implementation for a site with just a single video I haven’t looked into one yet, but I’m sure it will be coming up soon! Also, for MP4, Miro only seems to do single-pass encoding, so you may want to look at an alternative (like Avidemux) for two-pass encoding.

http://www.mirovideoconverter.com [new window]

There is a third format for HTML 5 – .webm. Say whaaat? It’s a format for Google’s open source codec VP8. It is supported by Firefox, Chrome and Opera currently, and if Safari adds support (and IE when they decide to join the HTML 5 video party) then it will solve the format wars problem. Of course whether Apple and Microsoft are comfortable with everyone using Google’s video codec is something that remains to be seen.

You can also convert your files to .webm with Miro Video Converter.

Online Conversion

If you are regularly converting large numbers of files, or want a solution to integrate with a CMS then a service like Zencoder [new window] is worth looking into, and I have had very satisfying results.

Alternatively, if you are running a *nix server and a willing to throw the resources at processing video yourself, you can check out ffmpeg [new window] - installation and configuration can be challenging, but there are people out there who will do it for you at very reasonable rates. If you are processing a lot of videos though, this will impact on your overall server performance, so bear this in mind.

Serving OGG files

Many web servers are not configured to correctly server OGG or WEBM files – this can easily be corrected by adding ‘AddType video/ogg .ogv ‘ and ‘AddType video/webm .webm’ to your .htaccess file. For safety’s sake you might want to add MP4 too:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm