This is very easy. Vimeo has API. This is theĀ Vimeo Simple API docs.
You should make a Video Request
To get data about a specific video, use the following url:
http://vimeo.com/api/v2/video/video_id.output
video_id The ID of the video you want information for.
output Specify the output type. We currently offer JSON, PHP, and XML formats.
So fow example getting this URLĀ http://vimeo.com/api/v2/video/6271487.xml. You will get xml output, with video information.
Parse this for every video to get the thumbnail
Here’s approximate code in PHP:
$imgid = 6271487; $hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php")); echo $hash[0]['thumbnail_medium'];
Also you can do this with javascript.
function vimeoLoadingThumb(id){ var url = "http://vimeo.com/api/v2/video/" + id + ".json?callback=showThumb"; var id_img = "#vimeo-" + id; var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; $(id_img).before(script); } function showThumb(data){ var id_img = "#vimeo-" + data[0].id; $(id_img).attr('src',data[0].thumbnail_medium); }
Show image:
<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" /> <script type="text/javascript"> vimeoLoadingThumb({{ video.id_video }}); </script>