19 July 2008 @ 21:49Making video accessible to iPhones

The problem I was looking to solve was that of iPhones and iPod touches not being able to play most of the videos on my site, that is videos that utilized the flash video player. My thought to fix this was to create two separate divs that were toggled between based on the User Agent.

Apple Online Store

First of all, I’m not well-versed in javascript, but I cobbled together a solution that mostly works.

First, I created a javascript file iphonevid.js

function show() {
    var srcElement1 = document.getElementById('iphonevid');
    var srcElement2 = document.getElementById('flashvid');
    if (navigator.userAgent.match(/AppleWebKit/i) && navigator.userAgent.match(/Mobile/i)) {
    return false;

Then I inserted the javascript in the <head> section of the page:

<script type="text/javascript" src="/js/iphonevid.js"></script>

Next I inserted the “onload” event to the <body> tag:

<body onload="show()">

Finally, I created two separate divs — one with my usual flash video player with id=”flashvid” and style=”display:block” and the second with embedded quicktime video, id=”iphonevid” and style=”display:none” .

See it in action on this post for the Watchmen trailer.

As I said earlier, the solution mostly works. On a page with just one showing video, it works like a charm, but on the front page of the blog where there is sometimes more than one video, the toggling only works on the first set. I’m sure this could be fixed by someone with a bit more javascript knowledge than myself. If you know how to fix this issue, let me know.

And if you don’t have an iPhone to test this with, you can use Safari. With the Develop menu enabled, the User Agent can easily be changed.

Be Sociable, Share!

by | Add a comment | Tags: , , , ,
Posted in video | Link to this

Add a Comment

Show who you are with a Gravatar.


Sign up for PayPal and start accepting credit card payments instantly.

Staples Logo

Get fed!

rss icon subscribe to Geek stuff

rss icon Geek stuff in your inbox

Add the "Geek stuff" Google Gadget to your homepage

Add the "Daily Deals" Google Gadget to your homepage


Search Amazon

Search Amazon.com
Search Amazon.co.uk

Recent Forum Topics


    Web hosting by ICDSoft