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!<

Comments

Thanks James - very useful. Good stuff.

Wonderfull and clear help, thank you very much. But my page gets always

Warning: imagecreatefromjpeg() [function.imagecreatefromjpeg]: Filename cannot be empty in ...

and

Warning: imagejpeg() expects parameter 1 to be resource, boolean given in ...

The $xml_pic seems to be empty. The xml data is clearly received and can be listed with

print_r 8$xml9;

Hmm. Any idea highly appreciated. (Im not a programmer)

As you say, it seems that $xml_pic is empty.

If you do a print_r() on the $xml variable, and copy it into a comment that'll give me a better idea of what the object you're working with looks like.

Gladly. Thank you for helping!

Here is the print_r() on $xml:

SimpleXMLElement Object
(
[video] => SimpleXMLElement Object
(
[id] => 18439821
[title] => ShapeShifter
[description] => "ShapeShifter" by Charlex<br /> narration by Gabriel Byrne<br /> <br /> www.chrlx.com
[url] => http://vimeo.com/18439821
[upload_date] => 2011-01-04 16:25:36
[mobile_url] => http://vimeo.com/m/18439821
[thumbnail_small] => http://b.vimeocdn.com/ts/115/989/115989332_100.jpg
[thumbnail_medium] => http://b.vimeocdn.com/ts/115/989/115989332_200.jpg
[thumbnail_large] => http://b.vimeocdn.com/ts/115/989/115989332_640.jpg
[user_id] => 2519878
[user_name] => CHRLX
[user_url] => http://vimeo.com/charlex
[user_portrait_small] => http://b.vimeocdn.com/ps/379/540/3795407_30.jpg
[user_portrait_medium] => http://b.vimeocdn.com/ps/379/540/3795407_75.jpg
[user_portrait_large] => http://b.vimeocdn.com/ps/379/540/3795407_100.jpg
[user_portrait_huge] => http://b.vimeocdn.com/ps/379/540/3795407_300.jpg
[stats_number_of_likes] => 9230
[stats_number_of_plays] => 1051098
[stats_number_of_comments] => 443
[duration] => 133
[width] => 1280
[height] => 720
[tags] => charlex, shapeshifter, technology, animation, motion graphics, visual effects, alex weil, gabriel byrne
[embed_privacy] => anywhere
)

)

The code Im hopefully copying correctly from you:

$xml = simplexml_load_file("http://vimeo.com/api/v2/video/".$id.".xml");
print_r ($xml);
$xml_pic = $xml->thumbnail_large;

$image = imagecreatefromjpeg($xml_pic);
imagejpeg($image, 'files/_vimeopreviews/'.$id.'-large.jpg', 100);

I had the idea that perhaps only small previews are always available, but didnt work out too.

Also it would be cool to see your if file exists solution you mention! Im using your code in combination with building a playlist RoyalSlider. Pretty hot.

Thanx!

It looks like you're maybe missing a step?

Your code is this:

$xml = simplexml_load_file("http://vimeo.com/api/v2/video/".$id.".xml");
$xml_pic = $xml->thumbnail_large;

But the code in the post is:

$xml = simplexml_load_file("http://vimeo.com/api/v2/video/".$videoid.".xml");
$xml = $xml->video;
$xml_pic = $xml->thumbnail_medium;

After I've loaded the xml, I immediately drill down into the video object. The thumbnail_medium information is 2 layers deep into the object, so if you add in that extra line hopefully it should start working. If not let me know and I'll take another look.

Great!! Thank you so much. Dumb from me! It works now.

I will now try to find out how to check if the image is already on the server. If you are moved to share this too, would be very cool. I wonder why this page has not a lot of comments. Seems to be the only tutorial to this vimeo preview thing out there!

No problem. I'm glad you managed to get it fixed.

To check if the file exists already you can use file_exists() function where you pass a string of the proposed destination. And yeah, if a file exists there already, there's no need to pull down the XML and save the image. Something like this:

$video_id = 1234567;
If (file_exists('thumbnails_directory/' . $video_id . '.jpg')) {
//file already exists.
}
else {
//code to get a thumbnail from video.
}

1000 thanx!!!!!

No problem. Drop me a line on the contact form if there's anything else I can help with.