html - thumbnail - Obtener img miniaturas de Vimeo?
api vimeo thumbnail (21)
Quiero obtener una imagen en miniatura para los videos de Vimeo.
Cuando obtengo imágenes de Youtube lo hago así:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
¿Alguna idea de cómo hacer para Vimeo?
Aquí hay un ejemplo de cómo hacer lo mismo en ASP.NET usando C #. Siéntase libre de usar una imagen de captura de error diferente :)
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";
}
}
NOTA: Su solicitud de API debería recibir esto cuando se solicite: http://vimeo.com/api/v2/video/32660708.xml
Con Ruby, puedes hacer lo siguiente si tienes, decir:
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
De la documentación de Vimeo Simple API :
Hacer una solicitud de video
Para obtener datos sobre un video específico, use la siguiente url:
http://vimeo.com/api/v2/video/video_id.output
video_id El ID del video del que desea información.
salida Especifique el tipo de salida. Actualmente ofrecemos formatos JSON, PHP y XML.
Obteniendo esta 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>
Analiza esto para cada video para obtener la miniatura.
Aquí hay un código aproximado en PHP
<?php
$imgid = 6271487;
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));
echo $hash[0][''thumbnail_medium''];
Deberías analizar la respuesta de la API de Vimeo. No hay forma de hacerlo con llamadas a URL (como dailymotion o youtube).
Aquí está mi solución 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;
}
Descomponiendo la respuesta de Karthikeyan P para que se pueda utilizar en una amplia gama de escenarios:
// 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;
};
Uso
Obtenga una identificación de Vimeo de una URL de video de Vimeo:
var vimeoId = parseVimeoIdFromUrl(vimeoUrl);
Obtenga una URL de miniatura de vimeo desde un ID de Vimeo:
getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
$(''div'').append(''<img src="'' + img + ''"/>'');
});
En javascript (usa 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);
}
Para mostrarlo:
<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
vimeoLoadingThumb({{ video.id_video }});
</script>
En realidad, el chico que hizo esa pregunta publicó su propia respuesta.
"Vimeo parece querer que haga una solicitud HTTP, y extraiga la URL en miniatura del XML que devuelven ..."
Los documentos de la API de Vimeo están aquí: http://vimeo.com/api/docs/simple-api
En resumen, su aplicación necesita realizar una solicitud GET a una URL como la siguiente:
http://vimeo.com/api/v2/video/video_id.output
y analice los datos devueltos para obtener la URL en miniatura que necesita, luego descargue el archivo en esa URL.
Es posible que desee echar un vistazo a la joya de Matt Hooks. https://github.com/matthooks/vimeo
Proporciona un envoltorio vimeo simple para la api.
Todo lo que necesita es almacenar el video_id (y el proveedor si también está haciendo otros sitios de video)
Puedes extraer el id de vimeo video así
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
y si usted necesita un tubo usted puede encontrar esto útil
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
Escribí una función en PHP para dejarme hacer esto, espero que sea útil para alguien. La ruta a la miniatura está contenida en una etiqueta de enlace en la página de video. Esto parece hacer el truco para mí.
$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;
Espero que ayude a cualquiera.
Foggson
Esta es una forma rápida y astuta de hacerlo, y también una forma de elegir un tamaño personalizado.
Yo voy aqui
http://vimeo.com/api/v2/video/[VIDEO ID].php
Descargue el archivo, ábralo y busque la miniatura de 640 píxeles de ancho; tendrá un formato como el siguiente:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_640.jpg
Tomas el enlace, cambias el 640 por, por ejemplo, 1400, y terminas con algo como esto:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_1400.jpg
Pégalo en la barra de búsqueda de tu navegador y disfruta.
Aclamaciones,
Estaba buscando lo mismo y parece que la mayoría de las respuestas aquí están desactualizadas debido a que Vimeo API v2 está en desuso.
mi 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;
con lo anterior obtendrá el enlace a la imagen en miniatura predeterminada de Vimeo.
Si desea utilizar una imagen de diferente tamaño, puede agregar algo como:
$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'';
La forma más fácil de JavaScript que encontré para obtener la miniatura, sin buscar la identificación del video es usar:
//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);
}
});
Nota: Si alguien necesita obtener la miniatura del video relacionada con la identificación del video, puede reemplazar la $id con la identificación del video y obtener un XML con los detalles del video:
http://vimeo.com/api/v2/video/$id.xml
Ejemplo:
http://vimeo.com/api/v2/video/198340486.xml
Para alguien como yo que está tratando de resolver esto recientemente,
https://i.vimeocdn.com/video/[video_id]_[dimension].webp funciona para mí.
(donde dimension = 200x150 | 640)
Parece que api / v2 está muerto.
Para utilizar la nueva API, debe registrar su aplicación y codificar en base64 el client_id y el client_secret como un encabezado de autorización.
$.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);
}
});
Por seguridad, puede devolver el client_id y el client_secret ya codificados del servidor.
Si desea utilizar la imagen en miniatura a través de pure js / jquery no api, puede utilizar esta herramienta para capturar un fotograma del video y ¡listo! Inserte el pulgar url en la fuente que desee.
Aquí hay una pluma de código:
<img src="https://i.vimeocdn.com/video/531141496_640.jpg"` alt="" />
Aquí está el sitio para obtener la miniatura:
Si está buscando una solución alternativa y puede administrar la cuenta de vimeo, existe otra forma, simplemente agregue cada video que desea mostrar en un álbum y luego use la API para solicitar los detalles del álbum; luego muestra todas las miniaturas y enlaces. . No es ideal pero podría ayudar.
Punto final API (área de juegos)
Twitter convo con @vimeoapi
Si no necesita una solución automatizada, puede encontrar la URL de la miniatura ingresando el ID de vimeo aquí: http://video.depone.eu/
Usando la solicitud jQuery jsonp:
<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>
Usando la url de Vimeo ( https://player.vimeo.com/video/30572181 ), aquí está mi ejemplo
<!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>
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;
}`
// en la siguiente función pasar la url miniatura.
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.$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);
});
}
}