Quiero obtener una imagen en miniatura para videos de Vimeo.
Cuando obtengo imágenes de Youtube, simplemente hago esto:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
¿Alguna idea de cómo hacer para Vimeo?
Quiero obtener una imagen en miniatura para videos de Vimeo.
Cuando obtengo imágenes de Youtube, simplemente hago esto:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
¿Alguna idea de cómo hacer para Vimeo?
Respuestas:
De los documentos 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 para el que desea información.
salida Especifique el tipo de salida. Actualmente ofrecemos formatos JSON, PHP y XML.
Entonces, obtener 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>
Analice 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'];
xml
. ¿Cómo puedo obtener thumbnail_small
con php
?
thumbnail_large
de i.vimeocdn.com/video/23566238_640.webp a i.vimeocdn.com/video/23566238_640.png o i.vimeocdn.com/video/23566238_320.jpg
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>
$(id_img).before
y $(id_img).attr
por createElement
y un más básico getElementById(id_img).src
, pero no lo habría obtenido en absoluto si no fuera por su ejemplo.
Debe analizar la respuesta de la API de Vimeo. No hay forma de hacerlo con llamadas 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;
}
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>
<div id='12345678' class='vimeo_thumb'></div>
, y eso se llenaría con la imagen en miniatura.
$.getJSON('http://vimeo.com/api/v2/video/' + video_id + '.json?callback=?', function (data) {...
Con Ruby, puede hacer lo siguiente si tiene, por ejemplo:
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
require 'open-uri'
permitir abrir para analizar los URI y los archivos.
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 ser así cuando se solicite: http://vimeo.com/api/v2/video/32660708.xml
public static string GetVimeoPreviewImage(string id) { try { XmlDocument doc = new XmlDocument(); doc.Load("http://vimeo.com/api/v2/video/" + id + ".xml"); return doc.DocumentElement.FirstChild.SelectSingleNode("thumbnail_medium").ChildNodes[0].Value; } catch { return string.Empty; } }
La forma más fácil de JavaScript que encontré para obtener la miniatura, sin buscar la identificación del video es usando:
//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 reemplazarla $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
$id
y obtendrás un XML con los detalles del video (incluye miniaturas). http://vimeo.com/api/v2/video/$id.xml
. por ejemplo: http://vimeo.com/api/v2/video/198340486.xml
. La fuente está aquí: coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video
Si desea utilizar la miniatura a través de js / jquery no api puro, puede usar esta herramienta para capturar un fotograma del video y ¡listo! Inserte el pulgar de la 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 miniatura:
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>
Parece que api / v2 está muerto.
Para usar la nueva API, debe registrar su aplicación , y base64 codifica el client_id
y 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);
}
});
Para mayor seguridad, puede devolver el client_id
y client_secret
ya codificada desde el servidor.
Esta es una forma rápida y astuta de hacerlo, y también una forma de elegir un tamaño personalizado.
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 este:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_640.jpg
Toma el enlace, cambia el 640 por - por ejemplo - 1400, y termina 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.
Salud,
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);
});
}
}
En realidad, el tipo 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 hacer 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.
Escribí una función en PHP para permitirme esto, espero que sea útil para alguien. La ruta a la miniatura está contenida dentro de 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
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 función de abajo pasa la url de la 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;
}
Descomponiendo la respuesta de Karthikeyan P para que pueda usarse en una gama más amplia 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;
};
Obtenga una identificación de Vimeo de una URL de video de Vimeo:
var vimeoId = parseVimeoIdFromUrl(vimeoUrl);
Obtenga una URL de miniatura de vimeo de un ID de Vimeo:
getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
$('div').append('<img src="' + img + '"/>');
});
ACTUALIZACIÓN: Esta solución dejó de funcionar a partir de diciembre de 2018.
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 usar 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';
Si no necesita una solución automatizada, puede encontrar la URL en miniatura ingresando el ID de vimeo aquí: http://video.depone.eu/
Creé un CodePen que busca las imágenes para ti.
HTML
<input type="text" id="vimeoid" placeholder="257314493" value="257314493">
<button id="getVideo">Get Video</button>
<div id="output"></div>
JavaScript:
const videoIdInput = document.getElementById('vimeoid');
const getVideo = document.getElementById('getVideo');
const output = document.getElementById('output');
function getVideoThumbnails(videoid) {
fetch(`https://vimeo.com/api/v2/video/${videoid}.json`)
.then(response => {
return response.text();
})
.then(data => {
const { thumbnail_large, thumbnail_medium, thumbnail_small } = JSON.parse(data)[0];
const small = `<img src="${thumbnail_small}"/>`;
const medium = `<img src="${thumbnail_medium}"/>`;
const large = `<img src="${thumbnail_large}"/>`;
output.innerHTML = small + medium + large;
})
.catch(error => {
console.log(error);
});
}
getVideo.addEventListener('click', e => {
if (!isNaN(videoIdInput.value)) {
getVideoThumbnails(videoIdInput.value);
}
});
Si está buscando una solución alternativa y puede administrar la cuenta de vimeo, hay otra manera, simplemente agregue todos los videos 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 de API (área de juegos)
Twitter convo con @vimeoapi
Es posible que desee echar un vistazo a la gema 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 la identificación del video vimeo 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 necesitas tu tubo puedes 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
Para aquellos que todavía desean una forma de obtener la miniatura solo a través de la URL, al igual que Youtube, se creó una pequeña aplicación que solo la obtiene con la ID de Vimeo.
https://vumbnail.com/358629078.jpg
Simplemente conecte su ID de video y lo extraerá y lo almacenará en caché durante 24 horas para que sirva rápidamente.
Si desea girar el suyo, puede hacerlo aquí .
Para alguien como yo que está tratando de resolver esto recientemente,
https://i.vimeocdn.com/video/[video_id]_[dimension].webp
funciona para mi.
(donde dimension
= 200x150 | 640)