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

Wenn ich Bilder von Youtube bekomme, mag ich das einfach so:

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

Irgendeine Idee, wie man es für Vimeo macht?

Hier ist die gleiche Frage ohne Antwort.

Aus den Vimeo Simple API-Dokumenten :

Eine Videoanfrage stellen

Verwenden Sie die folgende URL, um Daten zu einem bestimmten Video abzurufen:

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

video_id Die ID des Videos, für das Sie Informationen wünschen.

Ausgabe Geben Sie den Ausgabetyp an. Derzeit bieten wir JSON-, PHP- und XML-Formate an.

Erhalten Sie also diese 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>

Analysieren Sie dies für jedes Video, um die Miniaturansicht zu erhalten

Hier ist der ungefähre Code in PHP

<?php

$imgid = 6271487;

$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));

echo $hash[0]['thumbnail_medium'];  

In Javascript (verwendet 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);
}

So zeigen Sie es an:

<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
  vimeoLoadingThumb({{ video.id_video }});
</script>

Sie sollten die Antwort der Vimeo-API analysieren. Bei URL-Aufrufen (wie Dailymotion oder Youtube) gibt es keine Möglichkeit dazu.

Hier ist meine PHP-Lösung:

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

Verwenden der jQuery-Jsonp-Anforderung:

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

Mit Ruby können Sie Folgendes tun, wenn Sie beispielsweise Folgendes haben:

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

Hier ist ein Beispiel, wie Sie dasselbe in ASP.NET mit C # tun können. Fühlen Sie sich frei, ein anderes Fehlerfangbild zu verwenden :)

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

HINWEIS: Ihre API-Anfrage sollte auf Anfrage folgendermaßen aussehen: http://vimeo.com/api/v2/video/32660708.xml

Der einfachste JavaScript-Weg, den ich gefunden habe, um das Miniaturbild zu erhalten, ohne nach der Video-ID zu suchen, ist:

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

Hinweis: Wenn jemand die Miniaturansicht des Videos in Bezug auf die Video-ID erhalten möchte, kann er diese durch $iddie Video-ID ersetzen und eine XML-Datei mit den Videodetails abrufen:

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

Beispiel:

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

Quelle

Wenn Sie Thumbnail über pure js / jquery no api verwenden möchten, können Sie mit diesem Tool einen Frame aus dem Video und voila aufnehmen! Geben Sie den URL-Daumen in die Quelle ein, die Sie mögen.

Hier ist ein Codestift:

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

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

Hier ist die Seite, um ein Miniaturbild zu erhalten:

http://video.depone.eu/

Hier ist mein Beispiel unter Verwendung der 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>

Es scheint, als ob api / v2 tot ist.
Um die neue API verwenden zu können, müssen Sie Ihre Anwendung registrieren und base64 das client_idund client_secretals Autorisierungsheader 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);
    }
});

Aus Sicherheitsgründen können Sie das client_idund client_secretbereits verschlüsselt vom Server zurückgeben.

Dies ist eine schnelle und clevere Methode, um eine benutzerdefinierte Größe auszuwählen.

Ich gehe hierher:

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

Laden Sie die Datei herunter, öffnen Sie sie und suchen Sie das 640 Pixel breite Miniaturbild. Es hat ein Format wie das folgende:

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

Sie nehmen den Link, ändern den 640 für beispielsweise 1400 und erhalten am Ende Folgendes:

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

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

Prost,

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

Eigentlich hat der Typ, der diese Frage gestellt hat, seine eigene Antwort gepostet.

"Vimeo möchte anscheinend, dass ich eine HTTP-Anfrage stelle und die Miniatur-URL aus dem zurückgegebenen XML extrahiere ..."

Die Vimeo-API-Dokumente finden Sie hier: http://vimeo.com/api/docs/simple-api

Kurz gesagt, Ihre App muss eine GET-Anfrage an eine URL wie die folgende stellen:

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

Analysieren Sie die zurückgegebenen Daten, um die gewünschte Miniatur-URL zu erhalten, und laden Sie dann die Datei unter dieser URL herunter.

Ich habe eine Funktion in PHP geschrieben, um mich darauf einzulassen. Ich hoffe, sie ist für jemanden nützlich. Der Pfad zur Miniaturansicht ist in einem Link-Tag auf der Videoseite enthalten. Dies scheint den Trick für mich zu tun.

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

Hoffe es hilft jedem.

Foggson

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

// Bei der folgenden Funktion übergeben Sie die Thumbnail-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;
    }

Zerlegen der Antwort von Karthikeyan P, damit sie in einer größeren Anzahl von Szenarien verwendet werden kann:

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

Verwendung

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

var vimeoId = parseVimeoIdFromUrl(vimeoUrl);

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

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

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

UPDATE: Diese Lösung funktioniert seit Dezember 2018 nicht mehr.

Ich habe nach dem gleichen gesucht und es sieht so aus, als ob die meisten Antworten hier veraltet sind, da die Vimeo API v2 veraltet ist.

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

Mit dem oben genannten erhalten Sie den Link zum Standard-Miniaturbild von Vimeo.

Wenn Sie ein Bild unterschiedlicher Größe verwenden möchten, können Sie Folgendes hinzufügen:

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

Wenn Sie keine automatisierte Lösung benötigen, finden Sie die URL der Miniaturansicht, indem Sie die vimeo-ID hier eingeben : http://video.depone.eu/

Ich habe einen CodePen erstellt, der die Bilder für Sie abruft.

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

Wenn Sie nach einer alternativen Lösung suchen und das Vimeo-Konto auf andere Weise verwalten können, fügen Sie einfach jedes Video, das Sie anzeigen möchten, zu einem Album hinzu und fordern dann mithilfe der API die Albumdetails an. Anschließend werden alle Miniaturansichten und Links angezeigt . Es ist nicht ideal, könnte aber helfen.

API-Endpunkt (Spielplatz)

Twitter Convo mit @vimeoapi

Vielleicht möchten Sie einen Blick auf das Juwel von Matt Hooks werfen. https://github.com/matthooks/vimeo

Es bietet einen einfachen Vimeo-Wrapper für die API.

Sie müssten lediglich die video_id speichern (und den Anbieter, wenn Sie auch andere Videoseiten erstellen).

Sie können die Vimeo-Video-ID wie folgt extrahieren

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

und wenn Sie Ihre Röhre brauchen, finden Sie diese vielleicht nützlich

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

Für diejenigen, die immer noch eine Möglichkeit suchen, das Miniaturbild nur über eine URL abzurufen, wurde genau wie bei Youtube eine kleine Anwendung erstellt, die es nur mit der Vimeo-ID abruft.

https://vumbnail.com/358629078.jpg

Stecken Sie einfach Ihre Video-ID ein und sie wird abgerufen und 24 Stunden lang zwischengespeichert, damit sie schnell funktioniert.

Wenn Sie Ihre eigenen drehen möchten, können Sie dies hier tun .

Repo

Für jemanden wie mich, der versucht, dies kürzlich herauszufinden,

https://i.vimeocdn.com/video/[video_id]_[dimension].webp funktioniert bei mir.

(wobei dimension= 200 × 150 | 640)