[i code therefore i am]

So, in the month of May, I converted some websites for work to use the HTML5 video tag for viewing videos on the iPad. Turns out this wasn’t an easy task, could you have guessed that?

So, I just wanted to put out here a few of the lessons learned from my endeavors.

First of all, lets talk about the anatomy of the video tag:
The <video> tag defines video, such as a movie clip or other video streams. It’s only avilable in the HTML5 specification and most modern browsers can support the tag.
The tag supports the following attributes:

• autoplay – will cause the video to begin playing as soon as it is ready. This does not work in the iPad. Apple disabled this funtionallity, but you can force playback to begin with some cleaver javascript.
• controls – This will display the device’s native player controls
• height – sets the height of the player
• loop – will set the video to play continuously
• preload – Video will load on load of the page. This is totally ignored if autoplay is present.
• src – URL to media to play
• width – sets the width of the player

The <video> tag can also host the <media> tag. This tag allows you to set multiple media sources for fallback. If these are present, you need to exclude the src attribute on the <video> element.
Now to speak a little on audio and video codecs, this is important as it may change how you approach your implementation of the various players and fallback mechanisms.

The available audio and video container types for video currently are H264 and Ogg.
For audio, you have the following available codecs: AAC, MP3, and Vorbis
For video, you have the option to use H264, MP4, or Theora
Each browser implementation defines what it will support using it’s own embedded codecs. You can define multiple formats to ensure proper fallback if one or more formats aren’t supported.

---

One way to tackle the issue of limited codec support or missing video types is to use broswer detection, looking only for the iPad and swaping in a HTML5 Video tag if it is. This will allow you to provide consistant user experience regardless of the client.

The iPad User agent string is

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10
 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

Typically, you would want to try a more graceful approach and degrade inside of the video tag to use the quicktime player or flash player. You can see this method in action here The issue I ran into with this was that certain versions of FireFox will recognize the HTML5 Video tag, but won’t handle the video codec we are encoding our files in. Turns out that it expects the video file to be provided in .ogv format as opposed to the .mp4 file that we are sending out.

Another issue I ran into was when hovering any content over the <video> tag. You seem to loose the ability to click on the normal elements you would be able to take actions on. It appears as if the <video> tag is a black hole for user input. In fact, in order to be able to position anything over the <video> tag at all, it MUST exist on the page during the initial render. This means you cannot add this tag to the page via a javascript injection and still display items above it on the iPad.

---

Here are some useful reference material for those venturing into Video on the iPad:

• Video guidelines from Apple.
• Useful reference guide on what browers handle what, as well as encoding help.
• HTML5 and Javascript manipulation

Hope this saves someone some time.