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

当从Youtube上获得图像时,我只是这样做:

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

你知道如何处理Vimeo吗?

同样的问题,没有答案。


当前回答

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

其他回答

最简单的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

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

我创建了一个code depen来为您获取图像。

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

我写了一个函数在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;

希望能对大家有所帮助。

Foggson

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