Bekommen Sie Miniaturansichten von Vimeo?

Question

Ich möchte ein Vorschaubild für Videos von Vimeo erhalten.

Wenn ich Bilder von Youtube bekomme, mache ich einfach folgendes:

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

Irgendwelche Ideen, wie man das für Vimeo macht?

Hier ist dieselbe Frage, ohne Antwort.

Answer 1

Dies ist eine schnelle und clevere Möglichkeit, es zu tun, und auch eine Möglichkeit, eine benutzerdefinierte Größe auszuwählen.

Ich gehe hierhin:

http://vimeo.com/api/v2/video/[VIDEO-ID].php

Laden Sie die Datei herunter, öffnen Sie sie und finden Sie das 640 Pixel breite Thumbnail, es wird ein Format wie folgt haben:

https://i.vimeocdn.com/video/[LANGE NUMMER HIER]_640.jpg

Sie nehmen den Link, ersetzen die 640 durch - zum Beispiel - 1400, und Sie erhalten etwas wie dies:

https://i.vimeocdn.com/video/[LANGE NUMMER HIER]_1400.jpg

Fügen Sie ihn in die Suchleiste Ihres Browsers ein und genießen Sie es.

Prost,

Answer 2

Verwenden Sie die Vimeo-URL(https://player.vimeo.com/video/30572181), hier ist mein Beispiel

    Vimeo

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

Answer 3

Es sieht so aus, als ob api/v2 tot ist.
Um die neue API zu verwenden, müssen Sie Ihre Anwendung registrieren und die client_id und client_secret als Autorisierungsheader base64-codieren.

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

Zu Sicherheitszwecken können Sie die bereits von dem Server codierte client_id und client_secret zurückgeben.

Answer 4

function parseVideo(url) {
    // - Unterstützte YouTube-URL-Formate:
    //   - http://www.youtube.com/watch?v=My2FRPA3Gf8
    //   - http://youtu.be/My2FRPA3Gf8
    //   - https://youtube.googleapis.com/v/My2FRPA3Gf8
    // - Unterstützte Vimeo-URL-Formate:
    //   - http://vimeo.com/25451551
    //   - http://player.vimeo.com/video/25451551
    // - Unterstützt auch 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);
        });
    }
}

Answer 5

Die Antwort von Karthikeyan P. wird so umstrukturiert, dass sie in einer breiteren Palette von Szenarien verwendet werden kann:

// Benötigt 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;
};

Verwendung

Holen Sie sich eine Vimeo-ID von einer Vimeo-Video-URL:

var vimeoId = parseVimeoIdFromUrl(vimeoUrl);

Holen Sie sich eine Vimeo-Vorschaubild-URL von einer Vimeo-ID:

getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
    $('div').append('');
});

https://jsfiddle.net/b9chris/nm8L8cc8/1/