web-dev-qa-db-fra.com

Obtenir des vignettes img de Vimeo?

Je souhaite obtenir une vignette pour les vidéos de Vimeo.

Lorsque j'obtiens des images de Youtube, je fais comme ceci:

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

Une idée de comment faire pour Vimeo?

Voici la même question, sans aucune réponse.

292
Johan

À partir de la documentation de l'API Vimeo Simple :

Faire une demande de vidéo

Pour obtenir des données sur une vidéo spécifique, utilisez l'URL suivante:

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

video_id L'ID de la vidéo pour laquelle vous souhaitez obtenir des informations.

output Spécifiez le type de sortie. Nous proposons actuellement les formats JSON, PHP et XML.

Donc, obtenir cette 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>

Analyser cette pour chaque vidéo pour obtenir la vignette

Voici le code approximatif en PHP

<?php

$imgid = 6271487;

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

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

En javascript (utilise 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);
}

Pour l'afficher:

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

Utilisation de la requête 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>
44
elatonsev

Vous devriez analyser la réponse de l'API de Vimeo. Il n’ya aucun moyen de le faire avec des appels d’URL (comme dailymotion ou youtube).

Voici ma solution 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;
}
38
Erdal G.

Avec Ruby, vous pouvez faire ce qui suit si vous avez, par exemple:

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
22
Michel Barbosa

Voici un exemple montrant comment faire la même chose dans ASP.NET en utilisant C #. N'hésitez pas à utiliser une autre image d'erreur de capture :)

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

REMARQUE: votre demande d'API devrait ressembler à ceci: http://vimeo.com/api/v2/video/32660708.xml

20
Mtblewis

La méthode JavaScript la plus simple que j'ai trouvée pour obtenir la vignette, sans rechercher l'id de la vidéo, est d'utiliser:

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

Remarque: si quelqu'un doit obtenir la vignette de la vidéo associée à l'identifiant de la vidéo, il peut remplacer le $id par l'identifiant de la vidéo et obtenir un code XML contenant les détails de la vidéo:

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

Exemple:

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

Source

11
Roy Shoa

Si vous souhaitez utiliser des miniatures en mode js/jquery no api pur, vous pouvez utiliser cet outil pour capturer une image de la vidéo et le tour est joué! Insérez votre pouce dans la source de votre choix.

Voici un stylo code:

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

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

Voici le site pour obtenir une miniature:

http://video.depone.eu/

9
alphapilgrim

Utilisation de l’URL Vimeo ( https://player.vimeo.com/video/30572181 ), voici mon exemple

<!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>
9
Karthikeyan P

Il semble qu'api/v2 soit mort.
Pour utiliser la nouvelle API, vous devez enregistrer votre application , et en base64 coder client_id et client_secret en tant qu’en-tête d’autorisation.

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

Pour des raisons de sécurité, vous pouvez renvoyer les client_id et client_secret déjà codés à partir du serveur.

7
Diego Ponciano
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);
        });
    }
}
5
Yangshun Tay

En fait, le gars qui a posé cette question a posté sa propre réponse.

"Vimeo semble vouloir que je fasse une requête HTTP et que j'extrais l'URL miniature du XML qu'ils renvoient ..."

Les documents de l'API Vimeo sont ici: http://vimeo.com/api/docs/simple-api

En bref, votre application doit envoyer une requête GET à une URL du type suivant:

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

et analyser les données renvoyées pour obtenir l'URL de vignette dont vous avez besoin, puis téléchargez le fichier à cette URL.

4
Ian Kemp

C’est un moyen astucieux de le faire, mais aussi un moyen de choisir une taille personnalisée.

Je vais ici:

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

Téléchargez le fichier, ouvrez-le et recherchez la vignette de 640 pixels de large, le format sera le suivant:

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

Vous prenez le lien, changez le 640 pour - par exemple - 1400, et vous vous retrouvez avec quelque chose comme ceci:

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

Collez-le dans la barre de recherche de votre navigateur et profitez-en.

À votre santé,

4
Peanuts

J'ai écrit une fonction dans PHP pour me laisser faire cela, j'espère que cela sera utile à quelqu'un. Le chemin d'accès à la vignette est contenu dans une balise de lien sur la page vidéo. Cela semble faire l'affaire pour moi.

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

J'espère que ça aide quelqu'un.

Foggson

4
user342430

Décomposer la réponse de Karthikeyan P pour qu'il puisse être utilisé dans un plus large éventail de scénarios:

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

Usage

Obtenir un identifiant Vimeo à partir d'une URL de vidéo Vimeo:

var vimeoId = parseVimeoIdFromUrl(vimeoUrl);

Obtenir une URL miniature de vimeo à partir d'un identifiant Vimeo:

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

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

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

// en dessous de la fonction passe l'URL de la vignette.

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
chetanspeed511987

Si vous n'avez pas besoin d'une solution automatisée, vous pouvez trouver l'URL de la vignette en entrant l'ID de vimeo ici: http://video.depone.eu/

3
Emily Ryan

PDATE: Cette solution a cessé de fonctionner à compter de décembre 2018.

Je cherchais la même chose et il semble que la plupart des réponses ici sont obsolètes à cause de l’abandon de Vimeo API v2.

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

avec ce qui précède, vous obtiendrez le lien vers la vignette par défaut de Vimeo.

Si vous souhaitez utiliser une image de taille différente, vous pouvez ajouter quelque chose comme:

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

Si vous recherchez une solution alternative et que vous pouvez gérer le compte vimeo, vous pouvez ajouter toutes les vidéos que vous souhaitez afficher dans un album, puis utiliser l'API pour demander les détails de l'album. Il affiche ensuite toutes les vignettes et tous les liens. . Ce n'est pas idéal mais pourrait aider.

point final API (terrain de jeu)

Twitter convo avec @ vimeoapi

1
sidonaldson

Vous voudrez peut-être jeter un coup d'œil au joyau de Matt Hooks. https://github.com/matthooks/vimeo

Il fournit un wrapper vimeo simple pour l’API.

Tout ce dont vous avez besoin est de stocker video_id (et le fournisseur si vous utilisez également d'autres sites vidéo)

Vous pouvez extraire l'identifiant de la vidéo vimeo comme ceci

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

et si vous avez besoin de votre tube, vous trouverez peut-être cela utile

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

Pour quelqu'un comme moi qui essaie de comprendre cela récemment,

https://i.vimeocdn.com/video/[video_id]_[dimension].webp fonctionne pour moi.

(où dimension = 200x150 | 640)

0
novasaint