Html 从Vimeo获取img缩略图？_Html_Thumbnails_Vimeo

Html 从Vimeo获取img缩略图？

html

Html 从Vimeo获取img缩略图？,html,thumbnails,vimeo,Html,Thumbnails,Vimeo,我想从Vimeo获得视频的缩略图从Youtube获取图像时，我会这样做： http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg https://i.vimeocdn.com/video/[LONG NUMBER HERE]_1400.jpg 你知道如何为Vimeo做些什么吗事实上，问这个问题的人给出了自己的答案 “Vimeo似乎希望我发出HTTP请求，并从返回的XML中提取缩略图URL…” Vimeo API文档如下：简而言之，您的应用程序需要向URL

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

从Youtube获取图像时，我会这样做：

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

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

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

事实上，问这个问题的人给出了自己的答案

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

Vimeo API文档如下：

简而言之，您的应用程序需要向URL发出GET请求，如下所示：

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

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

从：

发出视频请求

要获取特定视频的数据，使用以下url：

video\u id要获取信息的视频的id

输出指定输出类型。我们目前提供JSON， PHP和XML格式

所以获取这个URL


[跳过]
http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_100.jpg 
http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_200.jpg 
http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_640.jpg 
[跳过]

对每个视频进行分析以获得缩略图

下面是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;

$video\u url=”http://vimeo.com/7811853"  
$file=fopen（$video_url，“r”）；
$filedata=stream\u get\u contents（$file）；
$html_content=strpos（$filedata，“以下是一个示例，说明如何在ASP.NET中使用C#执行相同的操作。请随意使用不同的错误捕获图像：）
注意：您的API请求在被请求时应该是这样的：
在javascript中（使用jQuery）：
要显示它，请执行以下操作：
<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
  vimeoLoadingThumb({{ video.id_video }});
</script>


VimeLoadingThumb（{{video.id_video}}）；
您可能想看看Matt Hooks的宝石
它为api提供了一个简单的vimeo包装器
您所需要的只是存储视频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

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


$.ajax({
类型：'GET'，
网址：'http://vimeo.com/api/v2/video/“+video_id+”.json”，
jsonp:“回调”，
数据类型：“jsonp”，
成功：功能（数据）{
var thumbnail\u src=数据[0]。thumbnail\u大；
$（'#thumb_wrapper'）。追加（''）；
}
});
您应该解析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;
}

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

Twitter Conva with
如果您不需要自动解决方案，您可以通过在此处输入vimeo ID来找到缩略图URL:
如果您想通过纯js/jquery no api使用缩略图，您可以使用此工具从视频中捕获一帧，然后瞧！插入您喜欢的任何来源的URL thumb
这是一支密码笔：



以下是获取缩略图的网站：
我发现，在不搜索视频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

使用Vimeo url（），下面是我的示例


维梅奥
$（文档）.ready（函数（）{
var vimeoVideoUrl=https://player.vimeo.com/video/30572181';
var match=/vimeo.*\/（\d+）/i.exec（vimeoVideoUrl）；
如果（匹配）{
var vimeoVideoID=匹配[1]；
$.getJSON（'http://www.vimeo.com/api/v2/video/“+vimeoVideoID+”.json？回调=？”，{format:“json”}，函数（数据）{
featuredImg=数据[0]。缩略图大小；
$（'#thumbImg'）.attr（“src”，featuredImg）；
});
}
});
分解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 + '"/>');
});

getVimeoThumbUrl（vimeoIds[0]）
.完成（功能（img）{
$（'div'）。追加（“”）；
});

api/v2似乎已经死了。

为了使用新的API，您需要对client\u id
和client\u 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);
    }
});

为了安全起见，您可以返回已从服务器编码的客户机id
和客户机机密
。
对于像我这样最近试图解决这个问题的人
https://i.vimeocdn.com/video/[video\u id]\u[dimension].webp
适合我
（其中维度
=200x150 | 640）
更新：此解决方案自2018年12月起停止工作
我也在寻找同样的答案，因为VimeoAPIv2被弃用，这里的大多数答案看起来都过时了
我的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';

这是一种快速、巧妙的方法，也是一种选择自定义尺寸的方法
我在这里：<
var vimeoId = parseVimeoIdFromUrl(vimeoUrl);

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

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

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

$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

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

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

<input type="text" id="vimeoid" placeholder="257314493" value="257314493">
<button id="getVideo">Get Video</button>
<div id="output"></div>

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

https://vumbnail.com/358629078.jpg