Get img thumbnails from Vimeo?
https://stackoverflow.com/questions/1361149
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I want to get a thumbnail image for videos from Vimeo.
When getting images from Youtube I just do like this:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
Any idea how to do for Vimeo?
Solution
From the Vimeo Simple API docs:
Making 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 getting this URL http://vimeo.com/api/v2/video/6271487.xml
<videos>
<video>
[skipped]
<thumbnail_small>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_100.jpg</thumbnail_small>
<thumbnail_medium>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_200.jpg</thumbnail_medium>
<thumbnail_large>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_640.jpg</thumbnail_large>
[skipped]
</videos>
Parse this for every video to get the thumbnail
Here's approximate code in PHP
<?php
$imgid = 6271487;
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));
echo $hash[0]['thumbnail_medium'];
OTHER TIPS
In javascript (uses jQuery):
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.src = url;
$(id_img).before(script);
}
function showThumb(data){
var id_img = "#vimeo-" + data[0].id;
$(id_img).attr('src',data[0].thumbnail_medium);
}
To display it :
<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
vimeoLoadingThumb({{ video.id_video }});
</script>
Using jQuery jsonp request:
<script type="text/javascript">
$.ajax({
type:'GET',
url: 'http://vimeo.com/api/v2/video/' + video_id + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumbnail_src = data[0].thumbnail_large;
$('#thumb_wrapper').append('<img src="' + thumbnail_src + '"/>');
}
});
</script>
<div id="thumb_wrapper"></div>
You should parse Vimeo's API's response. There is no way to it with URL calls (like dailymotion or youtube).
Here is my PHP solution:
/**
* Gets a vimeo thumbnail url
* @param mixed $id A vimeo id (ie. 1185346)
* @return thumbnail's url
*/
function getVimeoThumb($id) {
$data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
$data = json_decode($data);
return $data[0]->thumbnail_medium;
}
With Ruby, you can do the following if you have, say:
url = "http://www.vimeo.com/7592893"
vimeo_video_id = url.scan(/vimeo.com\/(\d+)\/?/).flatten.to_s # extract the video id
vimeo_video_json_url = "http://vimeo.com/api/v2/video/%s.json" % vimeo_video_id # API call
# Parse the JSON and extract the thumbnail_large url
thumbnail_image_location = JSON.parse(open(vimeo_video_json_url).read).first['thumbnail_large'] rescue nil
Here is an example of how to do the same thing in ASP.NET using C#. Feel free to use a different error catch image :)
public string GetVimeoPreviewImage(string vimeoURL)
{
try
{
string vimeoUrl = System.Web.HttpContext.Current.Server.HtmlEncode(vimeoURL);
int pos = vimeoUrl.LastIndexOf(".com");
string videoID = vimeoUrl.Substring(pos + 4, 8);
XmlDocument doc = new XmlDocument();
doc.Load("http://vimeo.com/api/v2/video/" + videoID + ".xml");
XmlElement root = doc.DocumentElement;
string vimeoThumb = root.FirstChild.SelectSingleNode("thumbnail_medium").ChildNodes[0].Value;
string imageURL = vimeoThumb;
return imageURL;
}
catch
{
//cat with cheese on it's face fail
return "http://bestofepicfail.com/wp-content/uploads/2008/08/cheese_fail.jpg";
}
}
NOTE: Your API request should like this when requested: http://vimeo.com/api/v2/video/32660708.xml
The easiest JavaScript way that I found to get the thumbnail, without searching for the video id is using:
//Get the video thumbnail via Ajax
$.ajax({
type:'GET',
url: 'https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
console.log(data.thumbnail_url);
}
});
Note: If someone need to get the video thumbnail related to the video id he can replace the $id with the video id and get an XML with the video details:
http://vimeo.com/api/v2/video/$id.xml
Example:
http://vimeo.com/api/v2/video/198340486.xml
If you would like to use thumbnail through pure js/jquery no api, you can use this tool to capture a frame from the video and voila! Insert url thumb in which ever source you like.
Here is a code pen :
<img src="https://i.vimeocdn.com/video/531141496_640.jpg"` alt="" />
Here is the site to get thumbnail:
Using the Vimeo url(https://player.vimeo.com/video/30572181), here is my example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<title>Vimeo</title>
</head>
<body>
<div>
<img src="" id="thumbImg">
</div>
<script>
$(document).ready(function () {
var vimeoVideoUrl = 'https://player.vimeo.com/video/30572181';
var match = /vimeo.*\/(\d+)/i.exec(vimeoVideoUrl);
if (match) {
var vimeoVideoID = match[1];
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', { format: "json" }, function (data) {
featuredImg = data[0].thumbnail_large;
$('#thumbImg').attr("src", featuredImg);
});
}
});
</script>
</body>
</html>It seems like api/v2 is dead.
In order to use the new API, you need to register your application, and base64 encode the client_id and client_secret as an Authorization header.
$.ajax({
type:'GET',
url: 'https://api.vimeo.com/videos/' + video_id,
dataType: 'json',
headers: {
'Authorization': 'Basic ' + window.btoa(client_id + ":" + client_secret);
},
success: function(data) {
var thumbnail_src = data.pictures.sizes[2].link;
$('#thumbImg').attr('src', thumbnail_src);
}
});
For security, you can return the client_id and client_secret already encoded from the server.
function parseVideo(url) {
// - Supported YouTube URL formats:
// - http://www.youtube.com/watch?v=My2FRPA3Gf8
// - http://youtu.be/My2FRPA3Gf8
// - https://youtube.googleapis.com/v/My2FRPA3Gf8
// - Supported Vimeo URL formats:
// - http://vimeo.com/25451551
// - http://player.vimeo.com/video/25451551
// - Also supports relative URLs:
// - //player.vimeo.com/video/25451551
url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
if (RegExp.$3.indexOf('youtu') > -1) {
var type = 'youtube';
} else if (RegExp.$3.indexOf('vimeo') > -1) {
var type = 'vimeo';
}
return {
type: type,
id: RegExp.$6
};
}
function getVideoThumbnail(url, cb) {
var videoObj = parseVideo(url);
if (videoObj.type == 'youtube') {
cb('//img.youtube.com/vi/' + videoObj.id + '/maxresdefault.jpg');
} else if (videoObj.type == 'vimeo') {
$.get('http://vimeo.com/api/v2/video/' + videoObj.id + '.json', function(data) {
cb(data[0].thumbnail_large);
});
}
}
Actually the guy who asked that question posted his own answer.
"Vimeo seem to want me to make a HTTP request, and extract the thumbnail URL from the XML they return..."
The Vimeo API docs are here: http://vimeo.com/api/docs/simple-api
In short, your app needs to make a GET request to an URL like the following:
http://vimeo.com/api/v2/video/video_id.output
and parse the returned data to get the thumbnail URL that you require, then download the file at that URL.
I wrote a function in PHP to let me to this, I hope its useful to someone. The path to the thumbnail is contained within a link tag on the video page. This seems to do the trick for me.
$video_url = "http://vimeo.com/7811853"
$file = fopen($video_url, "r");
$filedata = stream_get_contents($file);
$html_content = strpos($filedata,"<link rel=\"videothumbnail");
$link_string = substr($filedata, $html_content, 128);
$video_id_array = explode("\"", $link_string);
$thumbnail_url = $video_id_array[3];
echo $thumbnail_url;
Hope it helps anyone.
Foggson
function getVimeoInfo($link)
{
if (preg_match('~^http://(?:www\.)?vimeo\.com/(?:clip:)?(\d+)~', $link, $match))
{
$id = $match[1];
}
else
{
$id = substr($link,10,strlen($link));
}
if (!function_exists('curl_init')) die('CURL is not installed!');
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://vimeo.com/api/v2/video/$id.php");
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$output = unserialize(curl_exec($ch));
$output = $output[0];
curl_close($ch);
return $output;
}`
//at below function pass the thumbnail url.
function save_image_local($thumbnail_url)
{
//for save image at local server
$filename = time().'_hbk.jpg';
$fullpath = '../../app/webroot/img/videos/image/'.$filename;
file_put_contents ($fullpath,file_get_contents($thumbnail_url));
return $filename;
}
Decomposing Karthikeyan P's answer so it can be used in a wider array of scenarios:
// Requires jQuery
function parseVimeoIdFromUrl(vimeoUrl) {
var match = /vimeo.*\/(\d+)/i.exec(vimeoUrl);
if (match)
return match[1];
return null;
};
function getVimeoThumbUrl(vimeoId) {
var deferred = $.Deferred();
$.ajax(
'//www.vimeo.com/api/v2/video/' + vimeoId + '.json',
{
dataType: 'jsonp',
cache: true
}
)
.done(function (data) {
// .thumbnail_small 100x75
// .thumbnail_medium 200x150
// 640 wide
var img = data[0].thumbnail_large;
deferred.resolve(img);
})
.fail(function(a, b, c) {
deferred.reject(a, b, c);
});
return deferred;
};
Usage
Get a Vimeo Id from a Vimeo video URL:
var vimeoId = parseVimeoIdFromUrl(vimeoUrl);
Get a vimeo thumbnail URL from a Vimeo Id:
getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
$('div').append('<img src="' + img + '"/>');
});
This is a quick crafty way of doing it, and also a way to pick a custom size.
I go here:
http://vimeo.com/api/v2/video/[VIDEO ID].php
Download the file, open it, and find the 640 pixels wide thumbnail, it will have a format like so:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_640.jpg
You take the link, change the 640 for - for example - 1400, and you end up with something like this:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_1400.jpg
Paste it on your browser search bar and enjoy.
Cheers,
If you don't need an automated solution, you can find the thumbnail URL by entering the vimeo ID here: http://video.depone.eu/
UPDATE: This solution stopped working as of Dec 2018.
I was looking for the same thing and it looks like most answers here are outdated due to Vimeo API v2 being deprecated.
my php 2¢:
$vidID = 12345 // Vimeo Video ID
$tnLink = json_decode(file_get_contents('https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/' . $vidID))->thumbnail_url;
with the above you will get the link to Vimeo default thumbnail image.
If you want to use different size image, you can add something like:
$tnLink = substr($tnLink, strrpos($tnLink, '/') + 1);
$tnLink = substr($tnLink, 0, strrpos($tnLink, '_')); // You now have the thumbnail ID, which is different from Video ID
// And you can use it with link to one of the sizes of crunched by Vimeo thumbnail image, for example:
$tnLink = 'https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F' . $tnLink . '_1280x720.jpg&src1=https%3A%2F%2Ff.vimeocdn.com%2Fimages_v6%2Fshare%2Fplay_icon_overlay.png';
If you are looking for an alternative solution and can manage the vimeo account there is another way, you simply add every video you want to show into an album and then use the API to request the album details - it then shows all the thumbnails and links. It's not ideal but might help.
Twitter convo with @vimeoapi
You might want to take a look at the gem from Matt Hooks. https://github.com/matthooks/vimeo
It provides a simple vimeo wrapper for the api.
All you would need is to store the video_id (and the provider if you are also doing other video sites)
You can extract the vimeo video id like so
def
get_vimeo_video_id (link)
vimeo_video_id = nil
vimeo_regex = /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/
vimeo_match = vimeo_regex.match(link)
if vimeo_match.nil?
vimeo_regex = /http:\/\/player.vimeo.com\/video\/([a-z0-9-]+)/
vimeo_match = vimeo_regex.match(link)
end
vimeo_video_id = vimeo_match[2] unless vimeo_match.nil?
return vimeo_video_id
end
and if you need you tube you might find this usefull
def
get_youtube_video_id (link)
youtube_video_id = nil
youtube_regex = /^(https?:\/\/)?(www\.)?youtu.be\/([A-Za-z0-9._%-]*)(\&\S+)?/
youtube_match = youtube_regex.match(link)
if youtube_match.nil?
youtubecom_regex = /^(https?:\/\/)?(www\.)?youtube.com\/watch\?v=([A-Za-z0-9._%-]*)(\&\S+)?/
youtube_match = youtubecom_regex.match(link)
end
youtube_video_id = youtube_match[3] unless youtube_match.nil?
return youtube_video_id
end
For somebody like me who's trying to figure this out recently,
https://i.vimeocdn.com/video/[video_id]_[dimension].webp works for me.
(where dimension = 200x150 | 640)
