CSSREVOLT - blog personale di Filippo Buratti

Ho utilizzato spesso in PHP una classe simile a quella di Nemanja Avramovic per consentire agli utenti del mio CMS di inserire facilmente  i video di YOUTUBE nelle loro pagine. Passando il solo indirizzo della pagina del sito di Youtube dove risiede il video, è possibile innanzitutto ricavare anche l'indirizzo dell'immagine di anteprima. Inoltre, a differenza del codice di inclusione fornito da YOUTUBE, è possibile scegliere  il codice di embed del filmato flash in base alle proprie preferenze, anche in considerazione di una validazione del codice XHTML.

L'altro giorno mi sono chiesto se in fondo queste operazioni non si potevano fare anche in semplice Javascript. Ma certo che si può, in puro Javascript e senza una riga di script lato server. Allora mi sono inventato ProtoTube, che in poche parole è un viewer per i video di YOUTUBE, per semplificare le modalità di inserimento del video nelle pagine di un sito.

Come si usa ProtoTube

Oltre ad includere i necessari file Javascript (il plugin ProtoTube e le librerie Prototype, Scriptaculous  e SWFObject) e CSS, è necessario inserire nel documento html un semplice collegamento ipertestuale (un tag provvisto di un id identificativo) che punti alla pagina del video sul sito di YOUTUBE. Sono quindi disponibili due modalità d'uso:

• di default, viene mostrata l'immagine di anteprima del video, iniettata nel link, e al click viene caricato e riprodotto il video in modalità lightbox.
• altrimenti è possibile rimpiazzare il collegamento con il video stesso, inserendolo direttamente nell'html e pronto alla riproduzione senza ulteriori azioni dell'utente.

E' poi possibile intervenire nella personalizzazione di diversi parametri: dimensioni del filmato, autoplay, loop, fullscreen, high definition, etc

Compatibilità

Ho scritto il codice abbastanza di getto, tanto che non mi sento di dire per quanto resterà in beta; al momento sembra comunque funzionare egregiamente su tutti i browser che ho provato, e cioè: IE6, IE7, IE8, Firefox 3.09, Safari 3.2.2, Opera 9.61.

Download e documentazione

Demo, documentazione, download:ProtoTube (YOUTUBE javascript class)

Aggiornamenti

Ho corretto un bug che si verificava con internet explorer (06/01/09).

In questo sito utilizzo una versione modificata di Prototube che insieme all'utilizzo della mia classe php per la gestione dei video (sp.video class) consente l'inclusione di video sia da Vimeo che da Youtube.