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.
1 2 3 4 5 6 7 8 9 | <script type="text/javascript" language="javascript"> <!-- if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { document.getElementById("jj").innerHTML = "<a href=\"VIDEO_URL\"><img src=\"/images/jj.jpg\" /></a>"; } --> </script> |
Lee
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.
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.
@Rick yes John Gruber’s post is very well written indeed and is a good read.
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
I found this yesterday, seems like a nice alternative: http://camendesign.com/code/video_for_everybody
No Javascript, cross browser compability and works on iPhone too.
Honestly, i just use a video tag in the same div swfobject writes to. thats been working fine on the iphone thus far.
@Rick
Interesting article, but not very recent (2/13/08), if this is the article you’re citing. Not sure since you didn’t post a link.
http://daringfireball.net/2008/02/flash_iphone_calculus
Portions of it aren’t really relevant since we’ll soon be able to export iphone apps via CS5. Can’t wait.
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.
http://developer.apple.com/safari/library/codinghowtos/Mobile/GraphicsMediaAndVisualEffects/index.html
‘Essa Poha’ hahahahahah
sorry for the off topic!
Maybe Adobe should start thinking about getting into the hardware business. If Google can do it, then why not?
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?