Html 从 Vimeo 获取 img 缩略图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1361149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get img thumbnails from Vimeo?
提问by Johan
I want to get a thumbnail image for videos from Vimeo.
我想从 Vimeo 获取视频的缩略图。
When getting images from Youtube I just do like this:
从 Youtube 获取图像时，我只是这样做：
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
Any idea how to do for Vimeo?
知道如何为 Vimeo 做吗？
回答by Fluffy
From the Vimeo Simple API docs:
Making a Video Request
发出视频请求
To get data about a specific video, use the following url:
http://vimeo.com/api/v2/video/video_id.output
video_idThe ID of the video you want information for.
outputSpecify the output type. We currently offer JSON, PHP, and XML formats.
要获取有关特定视频的数据，请使用以下网址：
http://vimeo.com/api/v2/video/video_id.output
video_id要获取信息的视频的 ID。
输出指定输出类型。我们目前提供 JSON、PHP 和 XML 格式。
So getting this URL http://vimeo.com/api/v2/video/6271487.xml
所以得到这个 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>
Parse this for every video to get the thumbnail
为每个视频解析这个以获得缩略图
Here's approximate code in PHP
这是PHP中的近似代码
<?php
$imgid = 6271487;
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));
echo $hash[0]['thumbnail_medium'];
回答by Natim
In javascript (uses jQuery):
在 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);
}
To display it :
要显示它：
<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
vimeoLoadingThumb({{ video.id_video }});
</script>
回答by Erdal G.
You should parse Vimeo's API's response. There is no way to it with URL calls (like dailymotion or youtube).
您应该解析 Vimeo 的 API 响应。没有办法通过 URL 调用（如 dailymotion 或 youtube）。
Here is my PHP 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;
}
回答by elatonsev
Using jQuery jsonp request:
使用 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>
回答by Michel Barbosa
With Ruby, you can do the following if you have, say:
使用 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
回答by Mtblewis
Here is an example of how to do the same thing in ASP.NET using C#. Feel free to use a different error catch image :)
以下是如何使用 C# 在 ASP.NET 中执行相同操作的示例。随意使用不同的错误捕获图像:)
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: Your API request should like this when requested: http://vimeo.com/api/v2/video/32660708.xml
注意：您的 API 请求在请求时应该是这样的：http: //vimeo.com/api/v2/video/32660708.xml
回答by Roy Shoa
The easiest JavaScript way that I found to get the thumbnail, without searching for the video id is using:
我发现获取缩略图的最简单的 JavaScript 方法是使用：
//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: If someone need to get the video thumbnail related to the video id he can replace the $idwith the video id and get an XML with the video details:
注意：如果有人需要获取与视频 ID 相关的视频缩略图，他可以将 替换$id为视频 ID 并获取包含视频详细信息的 XML：
http://vimeo.com/api/v2/video/$id.xml
Example:
例子：
http://vimeo.com/api/v2/video/198340486.xml
回答by alphapilgrim
If you would like to use thumbnail through pure js/jquery no api, you can use this tool to capture a frame from the video and voila! Insert url thumb in which ever source you like.
如果您想通过纯 js/jquery no api 使用缩略图，您可以使用此工具从视频中捕获一帧，瞧！在您喜欢的任何来源中插入 url 缩略图。
Here is a code pen :
这是一个代码笔：
<img src="https://i.vimeocdn.com/video/531141496_640.jpg"` alt="" />
Here is the site to get thumbnail:
这是获取缩略图的站点：
回答by Karthikeyan P
Using the Vimeo url(https://player.vimeo.com/video/30572181), here is my example
使用 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>回答by Diego Ponciano
It seems like api/v2 is dead.
In order to use the new API, you need to register your application, and base64 encode the client_idand client_secretas an Authorization header.
好像 api/v2 已经死了。
为了使用新的 API，您需要注册您的应用程序，并将client_id和client_secret作为授权标头进行 base64 编码。
$.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);
}
});
For security, you can return the client_idand client_secretalready encoded from the server.
为了安全起见，您可以从服务器返回client_id和client_secret已经编码。
