Skip to content

May 31, 2014

Get thumbnails from Vimeo video

vimeo-thumbnails

If you want to get thumbnails from Vimeo video, you should dig to the documentation of Vimeo API or just read this article.

I will take two sample Vimeo videos and will try to get thumbnails for them.

MOVE from Rick Mereki on Vimeo.

Natural Phenomena from Videosapien on Vimeo.

The first video has ID: 27246366 and the second ID is: 51430433

At first we should create two <img> elements for each thumbnail and we should set the ID somehow. I think the best option to make this, is using of data attributes, let’s call each attribute data-vimeo-id:

The HTML code will be:

<img alt="" data-vimeo-id="27246366" />
<img alt="" data-vimeo-id="51430433" />

The second part is more complex, and for simplifying of functionality let’s include jQuery library before we can start to write JavaScript code.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

We will create two functions: first one for updating of the image with required URL, and the second – for going through all such images and processing them using the first function.

The first function will take through Vimeo API the URL of the thumbnail, and after getting the URL will update the src attribute in <img> element.

Let’s build the first part. We should create a function which will take an ID parameter and will call Vimeo API for getting info of video with this ID, using AJAX request. After success we can see the actual data in console. We will use a calling of JSONP data. Let’s call this function getVimeoThumbnail.

To see if it works we will display received object in console. Let’s try to call this function with the first ID of video – getVimeoThumbnail(27246366):

You can check actual result on JSFiddle.net after opening a Console (press F12 – choose Console tab or choose the Network tab and find the last request).

We should receive a JSON which should look like this:

jQuery19101456628856878618_1401467797223([
   {
      "id":27246366,
      "title":"MOVE",
      "description":"*** Update feb 04 Brand new film TOWARDS THE SUN Check it out :) https:\/\/vimeo.com\/86002097 ***<br \/>\r\n<br \/>\r\nMOVE<br \/>\r\n<br \/>\r\n3 guys, 44 days, 11 countries, 18 flights, 38 thousand miles, an exploding volcano, 2 cameras and almost a terabyte of footage... all to turn 3 ambitious linear concepts based on movement, learning and food ....into 3 beautiful and hopefully compelling short films.....<br \/>\r\n<br \/>\r\n= a trip of a lifetime.<br \/>\r\n<br \/>\r\nmove, eat, learn<br \/>\r\n<br \/>\r\nFor updates and sneak peeks at upcoming projects please feel free to follow me on facebook and instagram<br \/>\r\nhttps:\/\/www.facebook.com\/pages\/Rick-Mereki\/277839202256508<br \/>\r\nhttp:\/\/instagram.com\/rickmereki<br \/>\r\n<br \/>\r\nRick Mereki : Director, producer, additional camera and editing<br \/>\r\nTim White : DOP, producer, primary editing, sound<br \/>\r\nAndrew Lees : Actor, mover, groover<br \/>\r\n<br \/>\r\nThese films were commissioned by STA Travel Australia: http:\/\/www.youtube.com\/watch?v=-BrDlrytgm8<br \/>\r\n<br \/>\r\nThanks heaps to Adam Fyfe, Brendan, Simon and Crissy at STA.<br \/>\r\n<br \/>\r\nAll Music composed and performed by Kelsey James (kelseyanne.james@gmail.com)<br \/>\r\nSoundtrack available here:<br \/>\r\nhttp:\/\/itunes.apple.com\/au\/album\/play-on-move-soundtrack-single\/id456257170<br \/>\r\n<br \/>\r\nMusic Recorded and mixed by Jake Phillips<br \/>\r\n<br \/>\r\nColour Grade : Edel Rafferty and Roslyn Di Sisto<br \/>\r\nOnline Edit : Peter Mirecki<br \/>\r\n<br \/>\r\nAssistance in titles and production design : Lee Gingold, Jason Milden, Rohan Newman<br \/>\r\n<br \/>\r\nBig Ups to Michelle, Kiri, Renee, Hana, Andre, Ross, Bernie & Julie for your patience and support and awesomeness.....  <br \/>\r\n<br \/>\r\nHuge Thanks to :<br \/>\r\nMarco, Juliana and Julio at GAP Argentina and Peru<br \/>\r\nAriana Cardenas, Toni Figuera and cooltra scooters in Barcelona,<br \/>\r\nAbete Zanetti Glass blowing school, Murano, Venice (http:\/\/www.abatezanetti.it)<br \/>\r\nAnnabel, Rosario and Carolina (Pitu) in France<br \/>\r\nJuane and Andrea from the Princeca Insolenta hostel in Chile<br \/>\r\n<br \/>\r\nThank you all for your kind words and encouragement. The response has been phenomenal and overwhelming. We never thought this little project would reach out to so many people. x",
      "url":"http:\/\/vimeo.com\/27246366",
      "upload_date":"2011-08-03 10:52:36",
      "mobile_url":"http:\/\/vimeo.com\/m\/27246366",
      "thumbnail_small":"http:\/\/i.vimeocdn.com\/video\/180758901_100x75.jpg",
      "thumbnail_medium":"http:\/\/i.vimeocdn.com\/video\/180758901_200x150.jpg",
      "thumbnail_large":"http:\/\/i.vimeocdn.com\/video\/180758901_640.jpg",
      "user_id":4095411,
      "user_name":"Rick Mereki",
      "user_url":"http:\/\/vimeo.com\/rickmereki",
      "user_portrait_small":"http:\/\/i.vimeocdn.com\/portrait\/2341828_30x30.jpg",
      "user_portrait_medium":"http:\/\/i.vimeocdn.com\/portrait\/2341828_75x75.jpg",
      "user_portrait_large":"http:\/\/i.vimeocdn.com\/portrait\/2341828_100x100.jpg",
      "user_portrait_huge":"http:\/\/i.vimeocdn.com\/portrait\/2341828_300x300.jpg",
      "stats_number_of_likes":80226,
      "stats_number_of_plays":14894601,
      "stats_number_of_comments":2452,
      "duration":60,
      "width":1280,
      "height":720,
      "tags":"move, travel, symmetry, hd, 5d, dslr, europe, thailand, peru, america",
      "embed_privacy":"anywhere"
   }
])

As you can see, in the JSON we have a KEY thumbnail_small, which is actually is what we are looking for – the URL of the Video thumbnail!

We can remove our console.log directive and replace it with a really useful things.

We can set this value for our variable: var thumbnail_src = data[0].thumbnail_small;

And via jQuery redefine the src attribute of the img element. We can use ID like selector to find our image:
$(‘[data-vimeo-id=’+id+’]’).attr(‘src’, thumbnail_src); to test if it works for one image.

Actually the first part is done!

Let’s add a second function. We will call it drawVimeoImages.

This function will take all elements with our custom attribute data-vimeo-id, after that it will calculate the number of all elements in our collection. If we have at least one element we can run a loop. Inside of loop we just will start the first function with id parameter, which will be taken from each image because it’s stored in value of custom data attribute data-vimeo-id.

After that, we will start our function to get thumbnails for all images with custom data attributes drawVimeoImages();

It was not very easy to get thumbnails from Vimeo, but it’s actually not a really big thing!