Reference
Annunci
Itek Developer
Programmare è arte
Play youtube videos con jquery colorbox plugin
Pubblicato da su 9 aprile 2011
In questo articolo vi mostrerò come utilizzare il plugin jquery colorbox. E’ un plugin che offre la possibilità di visualizzare all’interno di un browser immagini , codice html , video all’interno di una modal box. Il tutto con una grafica bella e professionale. Le potenzialità di questo plugin sono molteplici , ma in questo articolo ci soffermeremo nell’analizzare come visualizzare video yuotube. Per ulteriori informazioni su colorbox andate sul sito ufficiale http://colorpowered.com/colorbox/. Qui troverete il link per scaricare il plugin e una serie di esempi che illustrano le potenzialità del plugin stesso.
Se decidete di fare il download del codice di esempio che ho creato potete evitare di scaricare il plugin dal sito in quanto è già contenuto nel progetto.
- Download del codice : colorbox_youtube_crossdomain.zip
- Guarda il video in HD su Vimeo : http://vimeo.com/22168146
- Demo : http://www.zanninofrancesco.altervista.org/colorbox_youtube/index.html
Video Tutorial
Annunci
@ Submacros
Se hai scaricato il codice puoi notare che nel file file index.html in una sezione javascript hai il seguente codice
function getVideos() {
$.getJSON('http://gdata.youtube.com/feeds/api/videos?author=frank2tek&alt=json-in-script&orderby=published&start-index=1&max-results=10&callback=?',
function (data) {
getVideosCallback(data)
}
);
};
Questa rappresenta la chiamata ajax fatta con il metodo jquery getJSON al servizio youtube che ti restituisce i dati.
Come puoi notare alla fine dell’url nella richiesta puoi vedere &callback=?
Nella precedente versione questo parametro non era presente. Mi è bastato aggiungere, il callback=? per fare quella che viene definita una chiamata JSONP che è appunto una tecnica crossdomain. Al parametro callback puoi anche assegnare un nome specifico. Ma nel caso del metodo getJSON ( e in generale con tutte le funzioni jquery ajax ) se si imposta il parametro callback=? i dati ricevuti potranno poi essere elaaborati da una funzione anonima come in questo caso
function (data) {
getVideosCallback(data)
}
Ok, ti ringrazio per la spiegazione, infatti dopo avevo notato il cambiamento nella chiamata ajax. Gentilissimo 🙂
Potete fare nuovamente l’upload del codice. Ora dovrebbe funzionare senza problemi su tutti i browser 😉
Ho aggiunto anche un link dove potete vedere una demo funzionante.
Se avete problemi postate pure il problema nei commenti.
Grazie mille! Stavo infatti cercando di capire come fare questo crossdomain col javascript ma non ho molto pratica con il javascript! Grazie ancora per la disponibilità!
Ciao ciao!
Ah una domanda per curiosità: in che parte hai inseriro il crossdomain? Scusami l’ignoranza 🙂
C’è un problema con le richieste crossdomain. In giornata risolverò il problema e metterò a disposizione il nuovo codice 🙂
Caricate il progetto su un server o su un ide di sviluppo ( visual studio , eclipse , netbeans ) o su un qualsiasi server locale. Se lanciate il codice dalla cartella scaricata non funziona su tutti i browser. Ognuno di essi ha le sue restrizioni.
Ciao scusa una domanda, il metodo ajax purtroppo su explorer viene bloccato perchè il dominio tra js e quello di richiesta di youtube sono diversi. Avresti idea di come si risolve il problema?
Grazie!!!!!
Mi sembra molto strano.
Io l’ho provato ora su tutti i browser e funziona benissimo. Prova a caricare il tutto su un server o su visual studio o Eclipse o qualsiasi altro ide di svluppo . E poi fammi sapere.
Con firefox 5 purtroppo non funziona!!!!