Videos on iPhone and iPad
I guess a lot of people that have to deal with integrating videos on a website for iPhone and iPad, will - at some point - run into the problem that some videos simply won't play. In most cases embedding the video is the simple part: either we use the fantastic HTML5 specifcation or use some weird snippet for loading a Flash Video Player. But I don't want to look at that in this post, I want to dig a little deeper into the encoding problematics. But this is not about dealing with whether to use OGG Theora, VP8 or h264, or how to use them all at once. In this case I stumbled upon an iOS specific problem. So h264 would be the codec to look at, as this is the favourite on Apple devices.
Differences for iOS devices
One might think it would be enough to simply convert any video to h264 format for it to run on iPhone and iPad. But it isn't that easy: when a video plays on an iPad, this does not mean it will play on an iPhone (in my case it was an iPhone 3GS). Instead of playing the video Safari would instead show a crossed out play button, with the Safari Debug Console displaying a "very helpful" message:
Quicktime: Movie could not be played.
The iPad played the same video just fine.
After some research on the web I came to the conclusion that it's not enough to choose the right codec. To a greater degree, you have to keep an eye on different parameters (as bitrate for audio and video). Sure, on other devices (not just Apple's) you have to deal with that too. A blog entry at Zencoder tries to summarize the settings for different devices.
Sure, you now could try to find the correct settings by trial and error. The iOS Simulator of XCode might help in that situation, as there the same problem occurs on the simulated iPhone, but not on the iPad. So you can debug on your local machine.
Use the Handbrake to quickly stop
With the hints from the zencode post I tried may way on the road, but of course the first attempt failed. The video conversion tool of my choice "Handbrake" (alternatives) luckily had a preset that would just fit the needs for Apple devices. So I tried it again with that preset - named "Apple - Universal", and, lo and behold, it worked. The video just played on both devices. I finally found the right conversion tool and settings.
Impacts your site
For site adminstrators this would mean to convert all videos they ever uploaded to the new format. This really only might be a viable solution for smaller sites, but in the current case it was fair enough to make the most important videos compliant for the iPhone.
Other solutions
Sure, converting the videos on your local machine is not feasible for every website. But it saves the need for server side processing (like ffmpeg) or implementing a third part tool (like Zencode). If you want to provide different sizes for different devices, the local conversion is no pragmatic solution. You should definitively grab an ffmpeg module or use a SaaS for video conversion for that use case.
