Obtenir img vignettes à partir de Vimeo?
21 réponses
From the Vimeo Simple API docs :
Faire une Demande de Vidéo
Pour obtenir des données sur une vidéo spécifique, utilisez l'url suivante:
http://vimeo.com/api/v2/video/video_id.output
video_id L'ID de la vidéo que vous souhaitez des informations pour.
sortie spécifier le type de sortie. Nous offrons actuellement JSON, PHP, et les formats XML.
donc obtenir cette 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>
analysez ceci pour chaque vidéo pour obtenir la vignette
voici le code approximatif en PHP
<?php
$imgid = 6271487;
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));
echo $hash[0]['thumbnail_medium'];
en javascript (utilise 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);
}
pour l'afficher:
<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
vimeoLoadingThumb({{ video.id_video }});
</script>
à l'Aide de jQuery jsonp demande:
<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>
vous devriez analyser la réponse de L'API de Vimeo. Il n'y a aucun moyen de le faire avec des appels D'URL (comme dailymotion ou youtube).
voici ma solution PHP:
/**
* 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;
}
avec Ruby, vous pouvez faire ce qui suit si vous avez, dites:
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
voici un exemple de comment faire la même chose dans ASP.NET using C#. N'hésitez pas à utiliser une autre erreur de capture d'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: Votre requête API devrait comme ceci lorsque demandé: http://vimeo.com/api/v2/video/32660708.xml
le moyen JavaScript le plus simple que j'ai trouvé pour obtenir la vignette, sans chercher l'id de la vidéo est d'utiliser:
//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: Si quelqu'un a besoin d'obtenir la vignette de la vidéo liée à l'id de la vidéo, il peut remplacer le $id avec l'id de la vidéo et obtenir un XML avec les détails de la vidéo:
http://vimeo.com/api/v2/video/$id.xml
exemple:
http://vimeo.com/api/v2/video/198340486.xml
si vous souhaitez utiliser la vignette à travers l'api pure js/jquery no, Vous pouvez utiliser cet outil pour capturer un cadre à partir de la vidéo et voila! Insérez le pouce d'url dans lequel jamais source vous aimez.
voici un stylo de code:
<img src="https://i.vimeocdn.com/video/531141496_640.jpg"` alt="" />
voici le site pour obtenir miniature:
utilisant l'url Vimeo ( https://player.vimeo.com/video/30572181 ), voici mon exemple
<!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> il semble que api/v2 soit mort.
Pour utiliser la nouvelle API, vous devez enregistrer votre application , et base64 Encoder les client_id et client_secret comme en-tête D'autorisation.
$.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);
}
});
pour des raisons de sécurité, Vous pouvez retourner les client_id et client_secret déjà encodés depuis le serveur.
en fait le gars qui a posé cette question a posté sa propre réponse.
"Vimeo semblent vouloir me faire une requête HTTP, et d'en extraire l'URL de vignette à partir du XML à leur retour..."
les documents de L'API Vimeo sont ici: http://vimeo.com/api/docs/simple-api
en bref, votre application a besoin de faire une requête GET à une URL comme celle-ci:
http://vimeo.com/api/v2/video/video_id.output
et analyse les revenus données pour obtenir L'URL de la vignette dont vous avez besoin, puis télécharger le fichier à cette URL.
j'ai écrit une fonction en PHP pour me permettre ceci, j'espère que c'est utile à quelqu'un. Le chemin vers la vignette est contenu dans une balise de lien sur la page vidéo. Ce qui semble faire l'affaire pour moi.
$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;
J'espère que ça aidera n'importe qui.
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;
}`
/ / fonction ci-dessous passez l'url de la vignette.
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;
}
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..indexOf('youtu') > -1) {
var type = 'youtube';
} else if (RegExp..indexOf('vimeo') > -1) {
var type = 'vimeo';
}
return {
type: type,
id: RegExp.
};
}
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);
});
}
}
décomposer la réponse de Karthikeyan P pour qu'il puisse être utilisé dans un plus large éventail de scénarios:
// 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;
};
Utilisation
Vimeo Id à partir d'une vidéo Vimeo URL:
var vimeoId = parseVimeoIdFromUrl(vimeoUrl);
vimeo de vignettes d'URL à partir d'un Vimeo Id:
getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
$('div').append('<img src="' + img + '"/>');
});
si vous n'avez pas besoin d'une solution automatisée, vous pouvez trouver L'URL de la vignette en entrant l'ID vimeo ici: http://video.depone.eu/
si vous êtes à la recherche d'une solution alternative et que vous pouvez gérer le compte vimeo d'une autre manière, vous n'avez qu'à ajouter toutes les vidéos que vous voulez montrer dans un album et ensuite utiliser l'API pour demander les détails de l'album - il affiche alors toutes les vignettes et les liens. Ce n'est pas l'idéal, mais peut aider.
API point de fin (aire de jeux)
convo Twitter avec @vimeoapi
vous pourriez vouloir jeter un oeil à la gemme de Matt Hooks. https://github.com/matthooks/vimeo
il fournit un simple emballage vimeo pour l'api.
tout ce dont vous avez besoin est de stocker video_id (et le fournisseur si vous faites aussi d'autres sites vidéo)
vous pouvez extraire la vidéo vimeo id comme ça
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
et si vous avez besoin de vous tube vous pourriez trouver ceci 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
pour quelqu'un comme moi qui essaie de comprendre récemment,
https://i.vimeocdn.com/video/[video_id]_[dimension].webp ça me va.
(où dimension = 200x150 | 640)
je cherchais la même chose et il semble que la plupart des réponses ici sont périmées en raison de Vimeo API v2 étant déprécié.
mon 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;
avec ce qui précède, vous obtiendrez le lien vers L'image par défaut de la vignette Vimeo.
si vous voulez utiliser une image de taille différente, vous pouvez ajouter quelque chose comme:
$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';
il s'agit d'un astucieux moyen de le faire, et aussi une façon de choisir une taille personnalisée.
j'ai rendez-vous ici:
http://vimeo.com/api/v2/video/[VIDEO ID].php
Téléchargez le fichier, ouvrez-le, et trouvez la vignette de 640 pixels de large, il aura un format comme ceci:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_640.jpg
vous prenez le lien, changez le 640 pour - par exemple-1400, et vous finissez avec quelque chose comme ceci:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_1400.jpg
coller sur votre barre de recherche de navigateur et profiter.
Cheers,