thumbnail html thumbnails vimeo

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í está la misma pregunta, sin ninguna respuesta.


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 + ''"/>''); });

https://jsfiddle.net/b9chris/nm8L8cc8/1/


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

Source


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:

http://codepen.io/alphalink/pen/epwZpJ

<img src="https://i.vimeocdn.com/video/531141496_640.jpg"` alt="" />

Aquí está el sitio para obtener la miniatura:

http://video.depone.eu/


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); }); } }