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.

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)) { srcElement1.style.display='block'; srcElement2.style.display='none'; } 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.