328

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

从 Youtube 获取图像时,我只是这样做:

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

知道如何为 Vimeo 做些什么吗?

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

4

26 回答 26

381

来自Vimeo 简单 API 文档

发出视频请求

要获取有关特定视频的数据,请使用以下 url:

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

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

输出指定输出类型。我们目前提供 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'];  
于 2009-09-01T08:14:38.610 回答
61

在 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>
于 2010-11-26T11:59:20.767 回答
53

您应该解析 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;
}
于 2012-05-08T17:24:30.497 回答
45

使用 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>
于 2011-12-23T13:24:00.023 回答
35

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

如果您想自己动手,可以在这里进行。

回购

于 2020-05-07T16:16:59.213 回答
23

使用 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
于 2009-12-02T20:42:24.267 回答
22

这是一个如何使用 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

于 2010-08-26T13:49:48.720 回答
18

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

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

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

例子:

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

来源

于 2015-12-24T10:08:11.870 回答
12

如果您想通过纯 js/jquery no api 使用缩略图,您可以使用此工具从视频中捕获一帧,瞧!在您喜欢的任何来源中插入 url thumb。

这是一个代码笔:

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

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

这是获取缩略图的网站:

http://video.depone.eu/

于 2015-11-25T20:42:07.343 回答
10

使用 Vimeo 网址(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>

于 2016-02-04T08:05:12.537 回答
10

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

我去这里:

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

将其粘贴到您的浏览器搜索栏并享受。

干杯,

于 2018-08-03T23:59:01.837 回答
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);
  }
});

在此处输入图像描述

于 2020-02-11T20:44:39.413 回答
8

好像 api/v2 已经死了。
为了使用新的 API,您需要注册您的应用程序client_id,并将和base64 编码client_secret为 Authorization 标头。

$.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已经编码。

于 2016-08-29T18:53:23.247 回答
6
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);
        });
    }
}
于 2014-03-31T14:06:20.690 回答
6

分解 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/

于 2016-05-11T13:20:26.300 回答
5

实际上,提出这个问题的人发布了他自己的答案。

“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 下载文件。

于 2009-09-01T08:14:37.877 回答
5

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

希望它可以帮助任何人。

福格森

于 2010-05-16T15:43:54.877 回答
5
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;
    }
于 2011-06-29T07:08:08.127 回答
5

如果您不需要自动化解决方案,您可以通过在此处输入 vimeo ID 找到缩略图 URL:http: //video.depone.eu/

于 2015-08-08T14:24:18.063 回答
5

更新:此解决方案于 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';
于 2018-06-27T19:10:07.610 回答
4

2020年解决方案:

我编写了一个使用 Vimeo Oembed API的PHP函数。

/**
 * 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");
于 2020-10-29T15:32:09.787 回答
3

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

注意:尝试从禁止域访问时会出现 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);
}

结果变量将从 oEmbed API 获取 JSON。

接下来,在我自己的用例中,我需要这些作为视频存档的缩略图。我为每个缩略图包装器 DIV 添加了一个 ID,其 ID 名为“thumbnail-{{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);
});
于 2021-09-24T11:16:49.787 回答
2

您可能想看看 Matt Hooks 的宝石。 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
于 2011-06-21T00:37:16.023 回答
2

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

API 端点(操场)

Twitter convo 与@vimeoapi

于 2015-05-12T13:50:40.610 回答
1

这是完美的解决方案 -

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

它对我有用。

于 2021-08-02T16:02:50.207 回答
-4

对于像我这样最近想弄清楚这一点的人来说,

https://i.vimeocdn.com/video/[video_id]_[dimension].webp为我工作。

(其中dimension= 200x150 | 640)

于 2017-02-13T21:01:13.277 回答