Providing alternative videos for iPhone

Let me state up front that this post is not meant to try to start a debate of the topic of Flash video, HTML 5, and the iPhone. I will post my thoughts on HTML 5 video in another post. The objective of this post is simply to show how easily you can provide an iPhone alternative to your Flash video content.

After getting back from Brasil, I started a new personal blog called Essa Porra. In one of the posts I showed a video of some of the beach jiu-jitsu that broke out down there. I used Vimeo to host the video. Now they recently announced a beta HTML 5 player but it doesn’t work for embedded videos so I decided to provide my own iPhone alternative. The actual steps are quite simple.

First you will most likely need to encode a version that will play nice on the iPhone. I used Handbrake to create it by choosing the iPhone/iPod preset. Now you also have to check off the Web optimized option if you want it to progressively stream. The next step is to get a photo from the video to show if the user is coming from the iPhone. It should have some type of icon showing that it is playable. I chose a simple white triangle. You can see the final result on the iPhone below.

Now you need to provide a little bit of JavaScript logic to check for the iPhone browser and change the content of the page. I took the Vimeo embed code and wrapped it in a div with an id of jj. In the JS code I remove the embed code if the user is coming from an iPhone and replace it with the image. The image is hyperlinked directly to the video file I encoded using Handbrake. This will make the video play in the standalone video player on the iPhone.

<script type="text/javascript" language="javascript">
if((navigator.userAgent.match(/iPhone/i)) ||
     document.getElementById("jj").innerHTML = "<a href=\"VIDEO_URL\"><img src=\"/images/jj.jpg\" /></a>";
That’s all there is to it. Kind of a pain but it is nice to provide this experience if you think a lot of your visitors will be coming from the iPhone. Check out the post from an iPhone to see it in action.


Show Comments

Hide Comments

Comments are closed.