disign.it | Jquery: YouTube video thumbnail | a digital sign for a best design!
A digital sign for a best design
Javascript 6.303 visualizzazioni

Jquery: YouTube video thumbnail

19/03/2012

Un piccolissimo plugin Jquery che ci permette di 'recuperare' la thumbnail di un video o l'immagine di un frame dello stesso video con estrema semplicità offrendo la possibilità di una preview al volo magari linkata all'url dello stesso video su YouTube.

Dopo aver caricato le librerie Jquery (qui l'articolo), inseriamo lo script, il plugin in questione è questo (sito web dell'autore):

 

(function($){
    $.extend({
        jYoutube: function( url, size ){
            if(url === null){ return ""; }

            size = (size === null) ? "big" : size;
            var vid;
            var results;

            results = url.match("[\\?&]v=([^&#]*)");

            vid = ( results === null ) ? url : results[1];

            if (size == "small") {
                return "http://img.youtube.com/vi/"+vid+"/2.jpg";
            } else {
                return "http://img.youtube.com/vi/"+vid+"/0.jpg";
            }
        }
    })
}) (jQuery);

 

Supponendo di aver all'interno della nostra pagina un div con id thumb, il caricamento dell'immagine avverrà con questa chiamata per visualizzare l'immagine grande:

 

$(document).ready(function(){
url = $.jYoutube('http://www.youtube.com/watch?v=yucAuHbe5Kg');
$('#thumbs').append($('<img src="'+url+'" />'));       
});

 

o con questa per visualizzare la thumb

 

$(document).ready(function(){
url = $.jYoutube('http://www.youtube.com/watch?v=yucAuHbe5Kg', 'small');
$('#thumbs').append($('<img src="'+url+'" />'));       
});

 

Naturalmente la definizione dell'url di riferimento del video potrà anche esser fatta in modo dinamico!

← Jquery: valore di default campo input Jquery: preload di immagini →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.