jQuery: visualizzare il nostro ultimo video di Vimeo

Vimeo fornisce delle API con cui è possibile interagire in modo completo con questa piattaforma. In questo articolo vedremo come reperire il nostro ultimo video utilizzando jQuery ed il formato JSONP delle API di Vimeo.

Quello di cui abbiamo bisogno è il nostro user ID di Vimeo (non il nostro username):

(function ($) {
    $.fn.vimeo = function (options) {
        var settings = {
            userid: '60155042'
        };

        options = $.extend(settings, options);

        var requestURL = 'http://vimeo.com/api/oembed.json?url=http://vimeo.com/' + options.userid + '&callback=?';

        var get = function(element) {
        	var html = '<div class="vimeo-video">';
            $.getJSON(requestURL, function (json) {
                html += '<h2>' + json.title + '</h2>'; // titolo del video
                html += '<p>' + json.description + '</p>'; // descrizione del video
                html += json.html; // l'elemento iframe che contiene il video
                html += '</div>';
                
                element.html(html);
            });
            
           
        };
        

        return this.each(function () {
        	var $element = $(this);
            get($element);
        });
    };
    })(jQuery);


$(function () {
    $('#wrapper').vimeo();
});

L'oggetto JSON restituito è il seguente:

({
	"type": "video",
	"version": "1.0",
	"provider_name": "Vimeo",
	"provider_url": "http:\/\/vimeo.com\/",
	"title": "Parallax site tested on iPad iOS6",
	"author_name": "Gabriele Romanato",
	"author_url": "http:\/\/vimeo.com\/gabrieleromanato",
	"is_plus": "1",
	"html": "<iframe src=\"http:\/\/player.vimeo.com\/video\/60155042\" width=\"468\" height=\"640\" frameborder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen><\/iframe>",
	"width": 468,
	"height": 640,
	"duration": 87,
	"description": "A jQuery-based parallax site tested on iPad without creating a specific mobile version.",
	"thumbnail_url": "http:\/\/b.vimeocdn.com\/ts\/418\/123\/418123816_295.jpg",
	"thumbnail_width": 295,
	"thumbnail_height": 403,
	"video_id": 60155042
})