August 2010

[UPDATE: 20th August 2010: Vimeo have now finally released their updated embedded player that they are calling the Vimeo Universal Player. So this code is fairly redundant now, unless you want to be able to take exact control yourself of what is served to people on different platforms. Which of course you may well have some good reasons to do.]

The embedded videos on chrisredding.com are hosted with vimeo.com. I chose Vimeo over the many other video websites due to the extensive control I can have over how, and crucially where, the video appears.

Vimeo have provided some support for mobile devices, but it involves directing users to their own 'mobile' site. However Vimeo have been considerably slower than their contemporaries in providing the ability to make embedded videos available to people who are using devices that do not support flash. Which includes most smart phones, and of course Apple's hand held devices.

Essentially, the method of delivering video on websites is going to change. Apple have been vocal in their criticisms of Adobe Flash as a delivery method for video, and prefer the emerging HTML5 standard instead. HTML5 makes embedding video very simple, but as it's a new technology, it isn't supported by that many browsers yet.

After doing some digging around on the net, I found several Javascript solutions that would serve up the alternative HTML5 video from Vimeo if the user was using a smart phone.

I generally don't like using Javascript on my site, and considering how the whole site runs on PHP, I wanted a nice simple PHP solution.

Basically the key bit of code that goes on the page where the video should appear is this:

<?php

if (preg_match("/iP(hone|od)/i", $_SERVER['HTTP_USER_AGENT']))

echo "<video src='http://www.vimeo.com/play_redirect?clip_id=$video_variable&quality=mobile' controls='controls' width='780' height='526'>

elseif (preg_match("/iPad/i", $_SERVER['HTTP_USER_AGENT']))

echo "<video src='http://www.vimeo.com/play_redirect?clip_id=$video_variable&quality=hd' controls='controls' width='780' height='526'>

elseif (preg_match("/Android/i", $_SERVER['HTTP_USER_AGENT']))

echo "<video src='http://www.vimeo.com/play_redirect?clip_id=$video_variable&quality=mobile' controls='controls' width='780' height='526'>

else

[NORMAL VIMEO EMBED CODE HERE]

?>

where '$video_variable' is the id of the video file on Vimeo (in my case, pulled from the database underlying my site, hence the $video_variable in the code where the video id should be), and whatever code you're using normally to embed your videos goes after the 'else'.

This checks the 'User Agent' that all browsers declare when they request a page, and then serves up different code depending on which platform they are using. The 3 different 'if' statements check for different things. An iPhone or an iPod Touch gets the HTML5 video with quality set to 'mobile', if the user agent contains 'Android', they also get the same thing. But if the user agent contains 'iPad' the HTML5 video is delivered with the quality set to 'hd'.

This solution may well break at some point in the future, as and when Vimeo releases it's updated "iPhone" compatible player.

I'll extend this to include other smart phones too when I get chance.

I've only been able to test this on the iPhone, so if anyone finds any problems, please let me know.

EDIT: A few people have contacted me to say that they've been unable to load some videos on this site on the iPhone or iPad. I've been able to replicate this on my iPhone too, but it seems to be random and intermittent. Since all the videos share the same PHP code, I can only assume this is a fault at the Vimeo end. Perhaps the 'mobile' versions of the videos aren't consistently available?

UPDATE: Stacy Conaway has very kindly made a video (on Vimeo of course!) of my site running perfectly well on his iPad, thanks Stacy.