Scritto da Luca il 6 Agosto 2010
La realizzazione di un altro sito internet mi ha messo di fronte alla necessità di trovare un player video gradevole da usare e che fosse in grado di caricare un file video caricato in precedenza sul server. Dopo una ricerca in internet, che mi ha portato a conoscere varie soluzioni più o meno convincenti, ho deciso di usare la versione gratuita di Flowplayer. Non ho acquistato la versione a pagamento per un semplice motivo: il logo che viene mostrato non da troppo fastidio e, detto tra noi, 69 euro per un player che posso usare su un solo dominio mi sembrano eccessivi.
L’implementazione all’interno del sito è abbastanza semplice, basta includere un Javascript, inserire il video sottoforma di link con display:block nelle proprietà CSS ed infine avviare il caricamento del player vero e proprio con un’ulteriore riga di codice, dicendo al browser che quel link è in realtà il video che vogliamo mostrare. Potete trovare un breve esempio di come fare tutto questo su questa pagina del sito ufficiale (in inglese).
Per fare la figheria si può integrare flowplayer all’interno di fancybox. Non è nulla di difficile, ma io ci ho messo tre giorni (per poi capire che il problema era un doppio ID all’interno del codice, e quindi il player cercava di avviarsi sull’elemento sbagliato).
Per i più smanettoni, l’interfaccia grafica di Flowplayer può essere curata in ogni dettaglio. Nel codice può infatti essere personalizzato il comportamento del player (autoplay, ad esempio) e la grafica (barra dei comandi, sfondo, proprietà del riquadro principale…). Sono inoltre supportate le playlist nel caso in cui vogliate mostrare più di un video.
Buona visione a tutti 🙂
AGGIORNAMENTO 2/10/2012: è uscito il nuovo Flowplayer, che finalmente fa pieno uso di HTML5!
Scritto da Luca il 12 Giugno 2010
Dopo aver perso ore e ore per capire come funziona e come integrare correttamente Fancybox in un sito internet, vi scrivo qui delle istruzioni (idealmente semplificate) su come farlo. Sento la necessità di scrivere questo articolo perché, nonostante io non sia un professionista nel settore (anzi!), ma penso comunque di cavarmela abbastanza bene a smanettare con i siti, ho trovato difficoltà nel seguire le istruzioni pubblicate sul sito ufficiale (visto che tralasciano dei passi importanti) e nel trovare informazioni supplementari (anche in inglese, figuriamoci in italiano).*
*Nota doverosa: essendo che i tempi di questo blog sono come quelli della giustizia italiana – molto lunghi (per questo articolo hanno raggiunto i sette mesi dall’idea alla pubblicazione), ora le informazioni che si trovano sul sito ufficiale sono state rese più chiare. Pubblico comunque l’articolo, visto che ormai è scritto, nel caso torni utile a qualcuno! 🙂
Ho scoperto Fancybox perché volevo inserirla in un sito a cui stavo lavorando, e solo in seguito ho realizzato che in passato avevo tentato invano di integrarla anche in questo blog per la visualizzazione delle immagini utilizzando un plugin; ora, quando ho un po’ di tempo, posso implementare il codice “manualmente”, senza usare un plugin esterno, malfunzionante peraltro! 🙂
Per chi non lo sapesse, Fancybox è un insieme di javascript e altri ammucchi di codice che, opportunamente integrati all’interno di un sito internet, permettono di aprire una fancy box appunto, ovvero un “contenitore” delle dimensioni prestabilite (da voi) che si sovrappone alla pagina e che può contenere qualsiasi cosa. Tipicamente viene usato per visualizzare le immagini in modo graficamente molto carino a mio avviso, anche perché è possibile aggiungere effetti grafici personalizzati molto belli; altri contenuti tipici sono video (di Youtube, ad esempio). Se volete vedere qualche esempio di come funziona Fancybox, date un’occhiata a questa pagina. Continua a leggere »
Commenti recenti