in Video

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.


Write a Comment



  1. Yes, it is kind of a pain Lee. It will continue to be a pain until Apple releases the source code. I’m not blaming Adobe at all, but Apple’s arrogance is really showing on this Flash Player issue for their iPhone and iPod.

  2. To John who comments above – What source code does he expect Apple to release?

    Also it’s worth reading the recent Daring Fireball piece about Flash and the iPhone, I think John Gruber makes some good points regardless of your opinion of whether Flash should be on the iPhone.

  3. I find it more of a pain that the iphone cannot playback most of the .mov, & .mp4 files that hit my inbox. Just load more freaking codec please Apple. Perian for the iphone please

  4. Apple has documentation on how to make your website and it’s video play well on the iPod Touch and iPhone.(This was available before there was even native apps or the SDK was available) This blog tutorial was great for people who aren’t aware what Apple has provided or had time to look through all the available materials.

    Here is one of the articles that is useful.

  5. Or, we could bring more multi-touch Flash sites to the web. Will Steve still blue lego Flash sites that are optimized for multi-touch screens?

  6. All this iPhone flash stuff is way over my head. I am just a normal Scottish bricklayer with an iPhone 4 and just want the thing to work. Think The iPhone will need to be replaced with something decent.