Last week I started work on a web based application to track all my workout data.  One of the things I wanted built into the application were inline videos – examples of the various exercises I would be doing.  As I started looking into the various formats that Android could play I came across an issue – while Android will play a number of formats locally it is much pickier about the formats that it will support for streaming over HTTP.

The most logical format for this would be H.264 – as the proposed standard video codec for the upcoming HTML5 spec it is set to be the new standard for web based video.  I tested a number of encoding tools and while they would all play locally just fine I couldn’t hit upon the right combination of video codec/settings and audio codec/settings.  While H.264 video worked just great using AAC LC audio appeared to be a deal breaker.

Finally I found a sample video that did stream just perfectly, also encoded using AAC LC audio (I found that the audio piece was the tough part).  While the encoders I was using would create AAC LC audio there was always something wrong with the settings.  Until I found 3GP Converter.

This little tool will take in almost any type of video (I am converting from WMV) and convert it to H.264 with AAC LC audio.  I did however have to hit upon the right settings in it as well.  When you run the setup program it first asks you the language then the device type.  I choose English and “MP4 for iPod” as the device.  You are then given a small screen that you can drag and drop your files to be converted onto with a small drop down in the middle to set the final settings.  I found that the only one that worked is “AVC QVGA/384kbps”.  The only trouble is that this setting creates “M4V” files, all you need to do is renamed them to MP4 and you’re good to go.

Embedding your videos using the HTML5 spec is insanely easy (that is if the client browser supports it, many don’t).  All you need to do is:

<video width="320" height="240"id='videoWarm-Up' src="/path/to/video.mp4" controls autobuffer></video>

And that’s all there is to it.  No encoding in Flash, no embedding objects, just that one line of code.  I’ve tested this in the latest Chrome and Safari (and Safari on the iPad) and it works great.  Here’s a quick example video for you (if you use Safair or Chrome that is!):