In the past when adding video’s to a video gallery on my site I’ve taken a snapshot of an appropriate part of the video and used that as the thumbnail so the video is easily identifiable. This can be quite a long and tiresome process if you’ve got a video gallery of 20+ video’s and you have to take a snapshot, re-size and upload for each.

I took a look at the Vimeo API to see if I could find a way to pull down the thumbnails which are automatically generated when you upload a video to Vimeo and use that instead.

Getting the XML

To get the specific information about your video you can make an XML request to the following URL structure: http://vimeo.com/api/v2/video/[video id].xml. In PHP you can load the XML details for the video using the following code.

$videoid = 7360670;
$xml = simplexml_load_file("http://vimeo.com/api/v2/video/".$videoid.".xml");

This would return you the following XML.

SimpleXMLElement Object(
  [video] => SimpleXMLElement Object
    (
      [id] => 7360670
      [title] => Denmark [James Davidson] - Video 03
      [description] => Denmark [James Davidson] - Pete Spatula.
      [url] => http://vimeo.com/7360670
      [upload_date] => 2009-10-31 07:27:16
      [thumbnail_small] => http://b.vimeocdn.com/ts/313/566/31356620_100.jpg
      [thumbnail_medium] => http://b.vimeocdn.com/ts/313/566/31356620_200.jpg
      [thumbnail_large] => http://b.vimeocdn.com/ts/313/566/31356620_640.jpg
      [user_name] => James Davidson
      [user_url] => http://vimeo.com/user2562783
      [user_portrait_small] => http://a.vimeocdn.com/portraits/defaults/d.30.jpg
      [user_portrait_medium] => http://a.vimeocdn.com/portraits/defaults/d.75.jpg
      [user_portrait_large] => http://a.vimeocdn.com/portraits/defaults/d.100.jpg
      [user_portrait_huge] => http://a.vimeocdn.com/portraits/defaults/d.300.jpg
      [stats_number_of_likes] => 0
      [stats_number_of_plays] => 2
      [stats_number_of_comments] => 0
      [duration] => 13
      [width] => 320
      [height] => 240
      [tags] => SimpleXMLElement Object
        ()
    )
)

Getting the Image

From this you have the URL’s of thumbnail’s in small, medium and large size. You could display these straight from Vimeo but too many requests could get you temporarily blocked and leave you with no images to display! So your best bet is to save these files to the server, that way you can resize them as appropriate.

$xml = $xml->video;
$xml_pic = $xml->thumbnail_medium;
$image = imagecreatefromjpeg($xml_pic);
imagejpeg($image, 'videos/'.$videoid.'-large.jpg', 100);

From the XML object you can drill down to the video, and then to the thumbnail and then using imagecreatefromjpeg() you can create an image resource. Finally the imagejpeg() function saves your new thumbnail to the server with the filename of your choice.

Resize the Image

If you’d like to resize the image before saving it you’ll need a few extra lines of code. In this instance I’m going to resize my image to be 300 pixels wide by 200 pixels high.

$w = 300;
$h = 200;

list($width, $height) = getimagesize($url);

$image_dest = imagecreatetruecolor($w, $h);
$image = imagecreatefromjpeg($url);
imagecopyresampled($image_dest, $image, 0, 0, 0, 0, $w, $h, $width, $height);

imagejpeg($image_dest, $newurl, 100);

Firstly we need the dimensions of the existing image which we’ll get using getimagesize(), then we’ll create a new true color image using imagecreatetruecolor() with the height and width we want our final image to be. We then generate our image resource from the Vimeo URL using imagecreatefromjpeg(), as before.

In the next step we use our destination image, our image resource, our destination dimensions and our source dimensions to resize the image (the 0′s inbetween are for if you want to alter the image coordinates but we’ll ignore them in this example). Finally as before we save our image using imagejpeg() with it’s new filename.

So now when I open my video gallery the code checks if my video already has a thumbnail saved on the server using file_exists() and if not goes and pull’s one from Vimeo!<