从Vimeo获取img缩略图?


308

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

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

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

知道如何为Vimeo做什么?

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


3
您是否检查了获取这些图像以在您的站点上使用它们是否合法?如果没有,那么这是一个有争议的起点。
lothar,2009年

12
是的,这是合法的-两个网站都以公开的方式提供了这些详细信息,因为它们希望您使用其内容!毕竟,所有嵌入的视频都链接回到托管站点。
Magnus Smith,2009年

1
如果要确保页面不依赖vimeo服务器,并且性能得到了优化,建议您使用javascript。不利的一面是,对于没有javascript的用户,它不会显示大拇指,但是带有链接的适当占位符应该足够友好。(将对Vimeo的api请求上的.xml更改为.json)
Myster,2010年

尝试以下答案:stackoverflow.com/a/17156853/146602-使获取具有URL的任何vimeo视频的信息/数据非常容易。
phirschybar 2014年

1
i.vimeocdn.com/video/528073804_200x200.webp通过这种方式,您可以获得视频图像
Pus

Answers:


361

Vimeo Simple API文档中

发出视频请求

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

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

好很好 我不熟悉xml。我怎样才能thumbnail_smallphp
约翰·

要使用PHP来获取它,请首先在URL中使用php扩展,例如vimeo.com/api/v2/video/6271487.php,您将获得一个文件,该文件的第一行似乎是序列化的php哈希,请使用unserialize然后只需阅读所需的条目即可
-Fluffy

1
谢谢,URL运行良好。同样,上面的API无法正常工作,因此请访问vimeo.com/api进行了解。
fedmich 2011年

5
您还可以更改图像大小和图像文件类型。例如,您可以将默认值thumbnail_largei.vimeocdn.com/video/23566238_640.webp更改为i.vimeocdn.com/video/23566238_640.pngi.vimeocdn.com/video/23566238_320.jpg
Michael McGinnis

28
由于API已失效,因此该答案不再有效
KnF '16

58

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

非常感谢,非常有帮助。我认为有一个非常小的错字。您在id_img变量中使用了#,但是在img元素id中却没有得到#。您的示例是否还假设使用jQuery?我使用了for $(id_img).before$(id_img).attrfor createElement一个更基础的方法getElementById(id_img).src,但是如果不是您的示例,则根本不会使用它。
原子

3
#问题是JQuery语法而不是错误。是的,它假定使用JQuery。
纳蒂姆2011年

啊,那好吧。感谢您的澄清。我不经常使用JQuery,但是答案对我来说仍然非常有用。
原子

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

感谢@AidasBendoraitis
Natim 2012年

45

您应该解析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;
}

3
这次真是万分感谢。这是我最喜欢的解决方案。
Bullyen

44

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

1
我想使用这个...但是如果我在一个页面上有多个视频怎么办?有什么方法可以将ID传递给通话吗?理想情况下,我想使用类似<div id='12345678' class='vimeo_thumb'></div>-的缩略图img。

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

22

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

2
注意:您可能需要require 'open-uri'允许open来解析URI和文件。
克里斯(Kris)

我必须添加url.scan(/vimeo.com \ /(\ d +)\ /?/)。flatten.to_s.delete(“ ^ 0-9。”)以获得vimeo ID#
艾布拉姆(Abram)

21

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


很好,但API链接仅在视频ID前面是vimeo.com/api/v2/video/video_id.xml,而不是“ video”。
马丁,

缩短此代码,并更改参数以接受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

14

我发现获取缩略图而不搜索视频ID的最简单的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

资源


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

1
Roy在按ID查找特定视频时如何使用该Ajax调用?
klewis

@blackhawk我没有,但是我现在用Google搜索它,为您找到了一些东西,只需将video_id替换为您$id,您将获得带有视频详细信息(包括缩略图)的XML。http://vimeo.com/api/v2/video/$id.xml。例如:http://vimeo.com/api/v2/video/198340486.xml。来源在这里:coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video
Roy Shoa

@blackhawk我编辑我的答案,您现在可以看到它。谢谢!
罗伊·肖阿

11

如果您想通过纯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/


1
@blackhawk网站已备份。
alphapilgrim

看起来这是随机帧,而不是视频创建者选择的官方封面/缩略图。很高兴知道这是存在的,但是我认为我将使用API​​ json parse方法,因为在此方面,从视觉效果的角度上无法控制封面。
squarecandy

9

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


你是最棒的。
亚历山大·卡扎科夫

7

似乎api / v2已死。
为了使用新的API,您需要注册您的应用程序,然后base64将client_id和编码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_id,并client_secret从服务器已经编码。


1
base64不是哈希。与在客户端对数据进行编码相比,在服务器上对数据进行base64编码再没有“安全”的事情了。也就是说,它可能会更快一些。
Sumurai17年

7

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

我去这里:

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

将其粘贴到浏览器搜索栏上,即可享受。

干杯,


此方法不起作用。返回未找到VIDEO_ID的php文件。
stldoug

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

4

实际上,问这个问题的人发表了自己的答案。

“ Vimeo似乎希望我发出HTTP请求,并从返回的XML中提取缩略图URL。”

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

简而言之,您的应用需要向如下网址发出GET请求:

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

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


4

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

希望它能帮助任何人。

福格森


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

//在下面的函数中传递缩略图网址。

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

4

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


4

更新:此解决方案自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';

请在任何官方公告链接(其中提到已弃用v2 vimeo)上为您提供帮助。
Deepak Yadav


2

我创建了一个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);
  }
});

在此处输入图片说明


1

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

API端点(游乐场)

使用@vimeoapi的 Twitter convo


这也许不是解决问题的最有效方法,尤其是在以下情况下:(1)您其余的代码不依赖于Vimeo API,并且(2)您有很好的感觉,您的API调用可能超出了Vimeo的范围设置为极限。
klewis's

@blackhawk,您错过了我的观点。可以选择 如果执行此操作,则将所有视频都放在一个API调用中。例如,您可以缓存该服务器端。
sidonaldson

1

您可能想看看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

0

对于那些仍然只想通过URL获取缩略图的方式,就像Youtube一样,它是一个内置的小型应用程序,仅使用Vimeo ID即可获取缩略图。

https://vumbnail.now.sh/358629078.jpg

只要插入您的视频ID,它就会将其拉出并缓存24小时,以便快速投放。

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

回购


-3

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

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

(其中dimension= 200x150 | 640)


1
好发现。这真的很干净。
本·哈里森

很棒,但iOS上的野生动物园无法显示webp
Gregory Magarshak

9
这似乎是错误的-我得到的图片与实际视频无关。拇指网址中使用的ID与视频ID不同-如果您调用api,则将获得具有不同ID的该网址。调用api没有捷径。
Morten Holmgaard '17

12
那是行不通的,video_id和image_id不相同。因此,您得到的图像将不属于您请求的视频
Nicolas Azrak '17

视频ID和缩略图中的ID不同
Muhammad Hassaan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.