Javascript per caricare video diversi senza refreshare la pagina
11/07/2011Lo script di oggi è un totally self made js, implementato in occasione delle recenti tesi.
Il problema originale era far caricare nella stessa pagina video diversi a partire da un menù di scelta senza ogni volta dover far ricaricare l'intero interfaccia.
Nella pagina occorre prima di tutto includere i js richiesti da Flash (in questo caso si tratta del js generato da Dreamweaver avendo anche utilizzato un player predefinto, anche se sarebbe consigliabile realizzarne uno ad hoc con preload incluso)
script src="Scripts/swfobject_modified.js" type="text/javascript" /script
Successivamente ad ogni voce le menù agganciamo la chiamata del Javascript di caricamento
a href="javascript:;" onclick="javascript:selezionavideo(1);" video uno /a
a href="javascript:;" onclick="javascript:selezionavideo(2);" video due /a
a href="javascript:;" onclick="javascript:selezionavideo(3);" video tre /a
A questo punto non resta che predisporre il javascript vero eproprio con la funzione selezionavideo che al click inserirà il codice di caricamento del player e del video.
Sostanzialmente il codice di chiamata del player flash è sempre uguale tranne che nelle variabili del nome del file (come sappiamo ripetuto in due posizioni per render tutto compatibile anche con IE).
I notri video dunque dovranno esser tutti caricati in una cartella specifica (nel mio esempio 'filmati', nominati progressivamnete video1.flv, video2.flv, video3.flv e così via...).
La funzione riceve alla chiamata un valore numerico n, definisce tre variabili e le unifica inserendo il valore n ricevuto in modo da poter scrivere nel punto di caricamento del video il valore numerico, e quindi di volta in volta caricare video1, video2, video 3 etc.
Infine con innerHTML scriviamo il codice nel div di pertinenza.
Ho aggiunto anche nella funzione una seconda parte che inserisce, sempre con InnerHTML, in un altro div la descrizione testuale del video caricato in play.
Non va dimenticato infine di caricare anche il palyer swf sule server (nell'esempio Clear_Skin_3.swf)
function selezionavideo(n) {
var vid1 = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="264" id="FLVPlayer"><param name="movie" value="FLVPlayer_Progressive.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="scale" value="noscale" /><param name="salign" value="lt" /><param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=filmati/video';
var vid2 ='&autoPlay=false&autoRewind=false" /><param name="swfversion" value="8,0,0,0" /><param name="expressinstall" value="Scripts/expressInstall.swf" /><!--[if !IE]>--><object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="600" height="264"><!--<![endif]--><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="scale" value="noscale" /><param name="salign" value="lt" /><param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=filmati/video';
var vid3 ='&autoPlay=false&autoRewind=false" /><param name="swfversion" value="8,0,0,0" /><param name="expressinstall" value="Scripts/expressInstall.swf" /><div><h4>Il contenuto di questa pagina richiede una nuova versione di Adobe Flash Player.</h4><p><a href="https://www.adobe.com/go/getflashplayer"><img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Scarica Adobe Flash Player" /></a></p></div><!--[if !IE]>--></object><!--<![endif]--></object>';
vid = vid1 + n + vid2 + n + vid3;
document.getElementById('nome_del_div_dove_riprodurre').innerHTML = vid;
n = n - 1;
txt=new Array("testo descrizione video 1", "testo descrizione video 2", "testo descrizione video 3" );
html = txt[n];
document.getElementById('nome_del_div_dove_scrivere_descrizione').innerHTML = html;
}