从Vimeo获得img缩略图?

我想从Vimeo获得视频的缩略图。

当从Youtube上获得图像时,我只是这样做:

http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg

你知道如何处理Vimeo吗?

这里是同样的问题,没有任何答案

318946 次浏览

事实上,问这个问题的人张贴了他自己的答案。

“Vimeo似乎想让我发出一个HTTP请求,并从他们返回的XML中提取缩略图URL……”

Vimeo API文档在这里:http://vimeo.com/api/docs/simple-api

简而言之,你的应用程序需要像下面这样对一个URL发出GET请求:

http://vimeo.com/api/v2/video/video_id.output

并解析返回的数据以获得所需的缩略图URL,然后在该URL下载文件。

Vimeo简单API文档:

视频请求

要获得特定视频的数据, 使用以下url:

http://vimeo.com/api/v2/video/video_id.output

video_id你想要信息的视频的ID。

输出指定 输出类型。我们目前提供JSON,

获取这个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>

解析每个视频以获得缩略图

下面是PHP的近似代码

<?php


$imgid = 6271487;


$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));


echo $hash[0]['thumbnail_medium'];

使用Ruby,你可以做以下事情,比如:

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

我写了一个函数在PHP让我这,我希望它对某人有用。缩略图的路径包含在视频页面的链接标记中。这似乎对我有用。

    $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;

希望能对大家有所帮助。

Foggson

下面是一个如何在ASP中做同样的事情的例子。NET使用c#。请随意使用不同的错误捕获图像:)

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

注意:当被请求时,你的API请求应该像这样:http://vimeo.com/api/v2/video/32660708.xml

在javascript中(使用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);
}

要显示它:

<img id="vimeo-\{\{ video.id_video }}" src="" alt="\{\{ video.title }}" />
<script type="text/javascript">
vimeoLoadingThumb(\{\{ video.id_video }});
</script>

你可能想看看马特·胡克斯的宝石。https://github.com/matthooks/vimeo

它为api提供了一个简单的vimeo包装器。

所有你需要的是存储video_id(和提供商,如果你也做其他视频网站)

你可以像这样提取vimeo视频id

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

如果你需要你的试管,你可能会发现这个很有用

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

//在下面的函数传递缩略图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;
}

使用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>

您应该解析Vimeo API的响应。没有办法用URL调用(如dailymotion或youtube)。

下面是我的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;
}
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);
});
}
}

如果你正在寻找一个替代的解决方案,可以管理vimeo帐户,还有另一种方式,你只需添加每个视频你想显示到一个相册,然后使用API请求相册的详细信息-然后显示所有的缩略图和链接。这不是理想的,但可能有帮助。

API end point (playground)

Twitter convo with @vimeoapi

如果你不需要一个自动化的解决方案,你可以通过在这里输入vimeo ID: http://video.depone.eu/来找到缩略图URL

如果你想通过纯js/jquery没有api使用缩略图,你可以使用这个工具从视频中捕获一帧,瞧!插入url拇指在任何你喜欢的来源。

这是一支码笔:

http://codepen.io/alphalink/pen/epwZpJ < a href = " http://codepen.io/alphalink/pen/epwZpJ " > < / >

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

以下是获取缩略图的网站:

http://video.depone.eu/ < a href = " http://video.depone.eu/ " > < / >

最简单的JavaScript方式,我发现,获得缩略图,无需搜索视频id是使用:

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

注意:如果有人需要获得与视频id相关的视频缩略图,他可以用视频id替换$id,并获得一个包含视频详细信息的XML:

http://vimeo.com/api/v2/video/$id.xml

例子:

http://vimeo.com/api/v2/video/198340486.xml

使用Vimeo url(https://player.vimeo.com/video/30572181),下面是我的例子

.
<!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>

分解Karthikeyan P的答案,使其可以用于更广泛的场景:

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

使用

从Vimeo视频URL获取Vimeo Id:

var vimeoId = parseVimeoIdFromUrl(vimeoUrl);

从vimeo Id获取一个vimeo缩略图URL:

getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
$('div').append('<img src="' + img + '"/>');
});

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

api/v2似乎死了 为了使用新的API,你需要注册您的应用程序, base64将client_idclient_secret编码为授权标头。< / p >

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

为了安全起见,您可以返回已经从服务器编码的client_idclient_secret

对于像我这样最近正试图弄清楚这个问题的人来说,

https://i.vimeocdn.com/video/[video_id]_[dimension].webp适合我。

(其中dimension = 200x150 | 640)

更新:此解决方案于2018年12月停止工作。

我也在找同样的事情,看起来这里的大多数答案都过时了,因为Vimeo API v2已弃用。

我的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;

通过上面的链接,你将得到Vimeo默认缩略图的链接。

如果你想使用不同大小的图像,你可以添加如下内容:

$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';

这是一种快速巧妙的方法,也是一种选择自定义大小的方法。

我去这里:

http://vimeo.com/api/v2/video/[VIDEO ID].php

下载文件,打开它,找到640像素宽的缩略图,它的格式如下:

https://i.vimeocdn.com/video/[LONG NUMBER HERE]_640.jpg

你拿这个链接,把640改成——比如——1400,你就会得到这样的东西:

https://i.vimeocdn.com/video/[LONG NUMBER HERE]_1400.jpg

把它粘贴到你的浏览器搜索栏上,享受吧。

欢呼,

我创建了一个code depen来为您获取图像。

< a href = " https://codepen。io / isramv /钢笔/ gOpabXg noreferrer“rel = > https://codepen.io/isramv/pen/gOpabXg < / >

超文本标记语言

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

enter image description here

对于那些仍然想要通过URL获取缩略图的人,就像Youtube一样,我构建了一个小应用程序,只使用Vimeo ID获取缩略图。

https://vumbnail.com/358629078.jpg

只要插入你的视频ID,它就会提取视频并缓存28天,所以它的服务速度很快。

下面是一些HTML中的例子:

Simple Image Example


<img src="https://vumbnail.com/358629078.jpg" />




<br>
<br>




Modern Responsive Image Example


<img
srcset="
https://vumbnail.com/358629078_large.jpg 640w,
https://vumbnail.com/358629078_medium.jpg 200w,
https://vumbnail.com/358629078_small.jpg 100w
"
sizes="(max-width: 640px) 100vw, 640px"
src="https://vumbnail.com/358629078.jpg"
/>

如果你想旋转你自己的,你可以这样做在这里

Repo

2020的解决方案:

我写了一个PHP函数,它使用Vimeo Oembed API。

/**
* Get Vimeo.com video thumbnail URL
*
* Set the referer parameter if your video is domain restricted.
*
* @param  int    $videoid   Video id
* @param  URL    $referer   Your website domain
* @return bool/string       Thumbnail URL or false if can't access the video
*/
function get_vimeo_thumbnail_url( $videoid, $referer=null ){


// if referer set, create context
$ctx = null;
if( isset($referer) ){
$ctxa = array(
'http' => array(
'header' => array("Referer: $referer\r\n"),
'request_fulluri' => true,
),
);
$ctx = stream_context_create($ctxa);
}


$resp = @file_get_contents("https://vimeo.com/api/oembed.json?url=https://vimeo.com/$videoid", False, $ctx);
$resp = json_decode($resp, true);


return $resp["thumbnail_url"]??false;
}

用法:

echo get_vimeo_thumbnail_url("1084537");

这里有一个完美的解决方案

   URL Example : https://vumbnail.com/226020936.jpg
URL method :  https://vumbnail.com/{video_id}.jpg

这对我很有效。

这似乎是一个老问题,但我有几个与Vimeo缩略图相关的项目,所以它在前几个月对我来说非常相关。所有的API V2都不适合我,i.vimeocdn.com链接每个月都被弃用。我需要这个可持续的解决方案,为此我使用了oEmbed API: https://developer.vimeo.com/api/oembed < / p >

注意:当试图从禁止域访问时,您将得到403错误。只使用目标域或将登台/本地域列入白名单。

下面是我如何用JS得到图像:

async function getThumb (videoId) {
var url = 'https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/'+videoId+'&width=480&height=360';
try {
let res = await fetch(url);
return await res.json();
    

} catch (error) {
console.log(error);
}

Result变量将从oEmbed API获得一个JSON。

接下来,在我自己的用例中,我需要这些作为视频存档的缩略图。我为每个缩略图包装DIV添加了一个ID,名为“缩略图-\{\{ID}}”;(例如,“thumbnail-123456789"”)并将图像插入到div中。

getThumb(videoId).then(function(result) {
var img = document.createElement('img');
img.src = result.thumbnail_url;
document.getElementById('thumbnail-'+videoId).appendChild(img);
});