VideoBox è un’evoluzione del javascript LightBox ( Leggi Articolo su SyGy ); Se non conoscete LightBox, questo script ci permetteva di avviare una presentazione di immagini oscurando la pagina madre e facendo visualizzare le immagini cliccate al centro del browser, tutto grazie solamente al CSS & al JavaScript .
VideoBox invece di far visualizzare le immagini al centro del browser, ci farà visualizzare il player video dei più famosi Video-Hosting come YouTube, Google Video, MetaCafe, iFilm. Quindi grazie a questo leggerissimo script ( solo 6Kb ) potremmo far visualizzare qualunque video oscurando la pagina madre e facendolo avviare al centro del browser. Questo script può essere molto utile, quando non vogliamo far appesantire la pagina madre facendo incorporare il player video; invece utilizzando questo script non appesantiremo la pagina perchè il player video verrà caricato solamente all’apertura del link, che naturalmente può essere testuale o un’immagine o qualunque altra cosa.
Una volta scaricato l’intero script per inserirlo nelle nostre pagine basterà copiare tra i tag <head></head> questi codici:
<script src=”https://www.sygy.it/wp-admin/js/mootools.js” type=”text/javascript”>
<script src=”https://www.sygy.it/wp-admin/js/swfobject.js” type=”text/javascript”>
<script src=”https://www.sygy.it/wp-admin/js/videobox.js” type=”text/javascript”>
<link rel=”stylesheet” href=”css/videobox.css” type=”text/css” media=”screen” />
Invece dovremmo creare un link del genere per far apparire l’animazione per la visualizzazione del player video:
<a href=”url_video” rel=”vidbox” title=”titolo del video”>Vedi il Video</a>
Qualunque link può essere adattato basterà solamente inserire il tag interno ( rel=”vidbox” ), questo perchè è proprio quel tag interno che dice al browser di avviare la presentazione CSS & Javascript per visualizzare quel determinato link all’interno della schermata VideoBox.
Inserendo il tag interno ( title=”titolo del video” ) diremmo allo script di inserire quel testo scritto fra le virgolette come nome del video da visualizzare sotto. Quindi oltre al video potremmo far visualizzare anche una stringa di testo dove potremmo descrivere il video o solamente scrivere il suo titolo.
Oltre ai noti player video, VideoBox supporta anche l’esecuzione di un’animazione FLASH qualsiasi, può essere un video, un gioco, un file audio o qualunque altra cosa, l’importante che sia codificata nello standard FLASH e quindi con estensione .swf. Dunque potremmo creare una pagina con moltissimi link a giochi online in FLASH senza appesantire la pagina facendo inglobare al interno decine e decine di player FLASH.
Lo script è personalizzabile in quanto potremmo scegliere noi stessi le dimensioni del player video. Questo grazie alla modifica del tag interno ( rel=”vidbox” ) in ( rel=”vidbox 800 600″ ) dove 800 sta per la larghezza & 600 sta per l’altezza; questi due numeri sono personalizzabili ai fini delle dimensioni del nostro player video, ricordo che le dimensioni sono espresse in pixel.
Come in LightBox una volta che l’animazione della pagina è partita quindi sarà oscurata la pagina madre e verrà visualizzato il player video, per uscire dalla visualizzazione basterà cliccare su un punto esterno al player o semplicemente cliccare sul pulsante “Close” che verrà visualizzato sotto al player ed a destra del titolo scelto.
Potremmo far iniziare la riproduzione della presentazione e quindi del player video anche sotto una funzione JavaScript con il seguente codice:
Videobox.open(“url video”,”titolo”,”vidbox largchezza altezza”);
Per avere degli esempi su come verrà eseguito lo script una volta che apriremo il link basterà cliccare sulle immagini di Demo nel sito VideoBox.
Per concludere…
Questo è un’ottimo script per visualizzare un player FLASH all’interno di una bellissima presentazione realizzata interamente in CSS & JavaScript. Questo metodo esalterà la qualità del sito Web e quindi anche del WebMaster. Uno script indispensabile per realizzare pagine di video Flash i quali senno appesantirebbero troppo le pagine in questione.
Questo Articolo è stato modificato il Novembre 4, 2007 11:51 am
Vedi Commenti
.. un piccolo aiutino...
Innanzitutto grazie per la spiegazione chiarissima!
Sto inserendo inun sito la VideoBox, in alcune pagine però avevo già inserito la galleria SmoothGallery.
Su ie non ho nessun problema, mentre su firefox e su safari la videobox sta dietro la galleria SmoothGallery!
Cosa poso fare???
Grazie
Un grande aiuto. Ho inserito videobox a questo indirizzo http://www.villacortese.net/video.htm ma non riesco a vedere il bottoncino di chiusura ed il titolo. Dov'è l'arcano? Grazie per l'aiuto. Cordiali saluti, peppino
Allora, caro Peppino.
Ho visto il codice HTML del tuo sito ed non hai inserito il codice nel giusto posto.
Allora i codici che richiamano i "JS" & "CSS", cioè questo:
Non sono inseriti all'interno dei tag < head> ma tra i tag < body>, e quindi l'HTML non è formattato in modo giusto.
Il bottoncino di chiusura si vede ma poi viene coperto dal video, questo è un sintomo che il CSS dello script non viene caricato nel giusto modo. Inoltre ricordati che il titolo va inserito con il tag interno "Title", nelle tue pagine ancora hai scritto "Caption".
Inserisci i codici che ti ho scritto sopra nel giusto posto e poi dovresti vedere tutto bene.
Fammi sapere se riesci!
Ciao Peppino! ;)
tutto ok. Grazie tante per il suggerimento, funziona tutto. Nel rifare il sito ho dimenticato questo particolare inportante. Complimenti per il sito. Ciao
Ok Peppino! E si a volte si dimenticano queste sottigliezze quando si sta aggiornando un sito da 0!
Grazie per i complimenti!
Ciao Peppino!
Per altri problemi, sono QUI!
ciao a tutti,
ho inserito videobox nel mio sito ma all'apertura della pagina mi da un errore:
"Impossibile aprire sito internet!
Chiudere la pagina"
cosa potrebbe essere?
Ma questo messaggio dove ti viene scritto? all'interno del browser, quando vai sulla pagina in qui hai inserito lo script VideoBox?
Ottimo script. Pensavo non funzionasse perchè uso anche il lightbox nella stessa pagina..invece tutto OK! (o quasi): infatti non riesco a inserire una immagine invece del link testuale. In particolare, l'immagine del video Youtube. HELP!
Non riesco a farlo funzionare: mi apre la pagina di youtube corrispondente al video. :shock:
@Mario:Ciao mario, scusa per il ritardo ma in questi giorni ho avuto qualche problema a connettermi, Comunque puoi far vedere qualche esempio cioè magari una pagina prova dove si nota questo problema. Ha inserito tutti i codici che richiamano i javascript?
Fammi sapere ok? ciao ciao