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.
document.getElementById("jj").innerHTML = "<a href=\"VIDEO_URL\"><img src=\"/images/jj.jpg\" /></a>";