HTML5 Video on iPhone

Enabling your videos for iPhone Safari doesn’t seem as a big deal. You know it supports HTML5 . Besides, you don’t even need to write event handlers and produce a skin by yourself, but only take a ready JS component. Apparently [videojs.com] is getting close to be the most popular one. Though, I personally like [mediaelementjs.com]. It is very simple to use any of them. The only difficulty is to get your videos converted to h.264, Theora Ogg and WebM. When two last ones are meant for desktop browsers Chrome/Opera/Firefox/EI9, the first is for mobile devices. And here we go, using a converter (e.g. E.M. Video Converter) we are getting .mp4 which looks pretty ok on iPad, but iPhone refuses even to try playing. Hmm, taking a look at Apple documentation and find nothing so special (H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps). But anyway let’s try to create a new profile for the video converter with those parameters plus define video bit rate less than 1.5Mb. Still no success.

Now let’s use ffmpeg . I took Windows build it for a test and applied following command:

ffmpeg -i input.mov -ab 128k -vcodec libx264 -b 1200k -mbd 2 -flags +mv4+aic -trellis 2 -cmp 2 -subcmp 2 -s 480x320 -metadata title="My Title goes here" output.mp4

Amazing, the movie now shows up perfectly on iPhone. What about other formats? You can use ffmpeg to get ogg and webm. Moreover, you can enable a handler for the event ‘Content manager has just uploaded video’. The handler launch ffmpeg on the server, creates mp4, ogg, webm instances and attaches them to the create content node. Voila! The update goes transparent for your site moderators, though your you have working HTML5 video player for all actual platforms including mobile ones.

P.S. If you want a solution covering all 3 video formats to suit HTML5 players, follow the guidance: http://ubuntuforums.org/showthread.php?t=786095. Some additional stuff can be found here http://lardbucket.org/blog/archives/2010/05/19/vp8-webm-and-ffmpeg/. For Theodora transcoding - http://v2v.cc/~j/ffmpeg2theora/examples.html.

Eventually I came up with following commands

ffmpeg -i 'test.mov' -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i 'test.mov' -vcodec libvpx -b 204800 -s 956x540 -aspect 4:3 -acodec libvorbis -ac 2 -y 'test. webm'

ffmpeg2theora --videobitrate 204800 --max_size 956x540 --output 'test.ogg' 'test.mov'

ffmpeg -i 'test.mov' -ab 128k -vcodec libx264 -b 1200k -mbd 2 -flags +mv4+aic -trellis 2 -cmp 2 -subcmp 2 -s 480x320 'test. mp4'