从Vimeo获取图像缩略图？

Question

我希望能够从 Vimeo 获取视频缩略图。

获取 Youtube 的图片只需要这样做：

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

有没有关于如何在Vimeo上实现的想法？

这里是同样的问题，但没有任何答案。

- Johan

---

没问题，这是翻译的结果：是合法的——两个网站都以非常公开的方式提供这些详细信息，因为他们希望你使用他们的内容！毕竟所有嵌入的视频链接最终都会回到托管站点。 - Magnus Smith

如果您想确保页面不依赖于vimeo服务器，并且性能得到优化，我建议您使用JavaScript来实现。缺点是对于没有启用JavaScript的用户，它将无法显示缩略图，但适当的占位符和链接应该足够友好。（在您的vimeo API请求中将“.xml”更改为“.json”） - Myster

尝试这个答案：https://dev59.com/yXPYa4cB1Zd3GeqPimsy#17156853 - 它使得仅凭URL就能轻松获取有关任何vimeo视频的信息/数据。 - phirschybar

以这种方式，您可以获取视频图像：https://i.vimeocdn.com/video/528073804_200x200.webp - Pus

@Pus，不调用API是否有可能获取Vimeo视频的缩略图？我的意思是，是否有任何URL可以只传递ID，然后它就会返回.jpg缩略图。当我这样做时 http://i.vimeocdn.com/video/201990344.webp 它会返回错误的缩略图。这是我的测试视频链接 https://vimeo.com/201990344。 - Farmer

@shailesh的解决方案不再起作用了。 - Shalev Levi

Answer 1

从Vimeo简单API文档中获取：

请求视频数据

要获取有关特定视频的数据，请使用以下URL：

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

video_id您要获取信息的视频的ID。

output指定输出类型。我们目前提供JSON、PHP和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>

为每个视频解析这个代码以获取缩略图

下面是 PHP 的大致代码：

<?php

$imgid = 6271487;

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

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

- Fluffy

---

谢谢，链接很好用。 另外，上面的API不起作用，请访问http://vimeo.com/api/了解更多信息。 - fedmich

您还可以更改图像大小和文件类型。例如，您可以将默认的“thumbnail_large”从http://i.vimeocdn.com/video/23566238_640.webp 更改为http://i.vimeocdn.com/video/23566238_640.png或http://i.vimeocdn.com/video/23566238_320.jpg。 - Michael McGinnis

由于 API 已过时，这个答案不再适用。 - KnF

请查看 https://github.com/vimeo/vimeo-oembed-examples/tree/master/oembed 获取更新的 JS 和 PHP 示例。 - tehlivi

API可能正在工作，但已被弃用且不受支持。使用需自担风险。https://vimeo.zendesk.com/hc/en-us/articles/360042975791-Deprecated-APIs-libraries-and-upload-methods oembed同样简单且目前受到支持。https://developer.vimeo.com/api/oembed/videos - rednuht

Answer 2

对于那些仍然想通过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" 
/>

如果你想自己启动，可以在这里这么做。

存储库

- Sam Carlton

---

我能翻译成中文，并确保内容流畅易懂，但不会提供任何额外的解释和信息。以下是需要翻译的内容：“This is what I want!” - Basit

太棒了，谢谢你分享这个！ - Jordi Bruin

注意：如果您发现这对于您的视频不起作用，可能是因为它较旧且具有较短的ID号码！请在其前面添加零，直到其至少变为8位数。例如：id 123456 不起作用，但 id 00123456 将起作用。 - Chris Barr

Answer 3

在 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>

- Natim

---

问题在于 JQuery 语法，而不是一个 bug。是的，它假定使用了 JQuery。 - Natim

这是相同代码的可测试jsfiddle：http://jsfiddle.net/archatas/Tv7GZ/ - Aidas Bendoraitis

任何带有api/v2的内容都已失效。 - Jon Dosmann

很遗憾，如果您对当前的API有更好的方法，请随意进行编辑。 - Natim

类似于 https://developer.vimeo.com/api/playground/videos/226413193/pictures 的东西。 - Natim

Answer 4

你需要解析 Vimeo API 的响应。与 Dailymotion 或 YouTube 不同，没有通过 URL 调用的方法。

这是我的 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;
}

- Erdal G.

---

谢谢你。这是我最喜欢的解决方案。 - Bullyen

Answer 5

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

- elatonsev

---

我想使用这个...但是如果页面上有多个视频怎么办？有没有办法将id传递给调用？理想情况下，我想使用类似于<div id='12345678' class='vimeo_thumb'></div>的东西--然后它会被缩略图填充。 - Dan

方法调用可以缩短为$.getJSON('http://vimeo.com/api/v2/video/' + video_id + '.json?callback=?', function (data) {... - Sanghyun Lee

这个方法还有效吗？我们在2021年使用它时遇到了问题。 请参见https://stackoverflow.com/questions/66053587/vimeo-api-jsonp-issue - WillC

@willC 不需要，使用oEmbed API即可。 - Shalev Levi

Answer 6

如果你有以下内容，使用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

- Michel Barbosa

---

注意：您可能需要“require 'open-uri'”来允许 open 解析 URI 和文件。 - Kris

我不得不添加url.scan(/vimeo.com/(\d+)/?/).flatten.to_s.delete("^0-9.")来获取vimeo ID #。 - Abram

需要 "open-uri" 需要 'json' 缩略图图片位置 = JSON.parse(URI.open("https://vimeo.com/api/v2/video/248816836.json").read).first['thumbnail_large'] - Johan

Answer 7

以下是使用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";
    }
}

注意：当您发出API请求时，应像这样请求：http://vimeo.com/api/v2/video/32660708.xml

- Mtblewis

---

不错，但API链接只有http://vimeo.com/api/v2/video/video_id.xml，而不是视频ID前面的“video”。 - Martin at Mennt

缩短了这段代码，并将参数更改为接受vimeo id而不是完整的URL。（无法弄清如何多行代码块）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; } } - elkaz

Answer 8

我发现获取缩略图最简单的 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

来源

- Roy Shoa

---

这是自从 Vimeo 弃用 v2 API 以来最好的答案。oEmbed 不需要身份验证，并返回包含缩略图 URL 的 JSON/XML 响应。https://developer.vimeo.com/apis/oembed - joemaller

Roy，我们如何使用Ajax调用来查找特定ID的视频？ - klewis

@blackhawk 我没有，但我现在为您谷歌了一下，并找到了一些东西，只需用您的$id替换video_id，您将获得一个包含视频详细信息（包括缩略图）的XML。 http://vimeo.com/api/v2/video/$id.xml。例如：http://vimeo.com/api/v2/video/198340486.xml。源代码在这里：https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video - Roy Shoa

@blackhawk 我编辑了我的答案，现在你可以看到它了。谢谢！ - Roy Shoa

Answer 9

如果您想通过纯JS / jQuery而不使用API来使用缩略图，您可以使用此工具从视频中捕获一帧，然后将URL缩略图插入到任何您喜欢的来源中。

这里是一个CodePen代码示例：

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

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

这里是获取缩略图的网站:

http://video.depone.eu/

- alphapilgrim

---

@blackhawk网站已经恢复正常。 - alphapilgrim

看起来这个方法获取的是随机帧，而不是视频创建者选择的官方封面/缩略图。知道这个存在很好，但我认为我会使用API json解析方法，因为使用这个方法无法控制vimeo侧面的封面艺术。 - squarecandy

Answer 10

我创建了一个 CodePen，可以为你获取图片。

https://codepen.io/isramv/pen/gOpabXg

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

- Israel Morales