Hello. I'm Rob V.

While working on a recent project I was faced with the task of embedding videos on a web page that would be compatible with the iPhone and iPad. It turns out HTML5 video is still in it’s infancy, but hopefully this article will save developers from the many headaches it provided me.

Encoding Woes

The first step was to get a video file that worked across all browsers, unfortunately it seems this is impossible. I could go down the road of explaining how or why, but that’s not the aim of this article so I’ll leave that explaining to other people, the basics are:

• Firefox, Opera, and Chrome support Theora video in an Ogg container
• Safari supports H.264 in a MP4 container

Converting files to these formats is another story entirely. Most people would recommend HandBrake, those people are not me; I could never quite get the Ogg files it created to work right. When I found out that the ogg files created by Handbrake were a common issue right now it all made sense and because of that I recommend ffmpeg2theora instead. As for MP4, a simple export from QuickTime is enough.

While this is all great if you’re actually embedding video using HTML5′s video tag, my next point will probably make the need for anything but H.264 video non-exsistent.

Embedding

This is by far the worst aspect of HTML5 video right now and what makes the idea of thinking about any browser outside of Safari pointless. The bottom line is, if your browser doesn’t allow video to play full screen, it’s simply not going to be acceptable to the majority of users. And while the javascript embed methods that allow full browser window viewing are clever, I simply don’t agree with the idea that users would find this acceptable (it turns out my client didn’t either).

Conclusion

The whole full screen issue left me questioning how to proceed, so I decided to do what I usually do and just implement the simplest solution. Safari (including mobile Safari) allow for full screen viewing while others do not, so why not just sniff the user agent and if it’s not Safari use Flash. While I’m aware that implementing video in this manner would require updating in the future, when browsers implement full screen viewing, there aren’t a lot of other options. Even if jQuery, with it’s nifty browser support method were to include HTML5 full screen video compatibility, one would have to update jQuery when an update is made. So I ended up deciding that it’s much better to serve Flash to a browser that supports HTML5 full screen video then to serve HTML5 video to a browser that doesn’t support full screen, end of story.

I decided to make the little jQuery plugin I created a public gist. The plugin’s only dependency is Flowplayer which it uses if the browser is not Safari.