kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
 Inviato: 17 Nov 2006 20:24 Oggetto: * [TUTORIAL] Inserire un filmato DIVX in una pagina web |
 |
|
Dunque, qualche mese fa è uscito il DivX Web Player 1.0 che permette di inserire nelle vostre pagine web un filmato in formato divx, e come al solito invece di fare il mio lavoro mi sono incuriosito ed ho giocato con il plugin per un paio d'ore. Mi sembra interessante sia come qualita' sia come velocita' di implementazione. Vediamolo un po' in dettaglio.
Il plugin è al momento disponibile solo per piattaforma windows:
Internet Explorer (5.0+),Firefox (1.0+),Mozilla (1.7+),Netscape (8.0+),Opera (8.0+)
e Macintosh:
Safari (2.0+),Firefox (1.0+),Mozilla (1.7+),Netscape (7.2+),Opera (8.51+),Camino (1.0+)
per la piattaforma linux invece è ancora in fase di sviluppo
| Citazione: |
and a Linux version are still in development and will be available soon
|
E' disponibile inoltre il DivX Browser Plug-In Webmaster SDK che rappresenta la guida per gli sviluppatori, con gli esempi di codice html per inserire il vostro video e una piccola reference per l'API javascript che viene a corredo del plugin.
Divx labs mette a disposizione un Code Generator che restituisce il codice necessario per l'inserimento nelle vostre pagine ma ora spieghero' dal punto di vista del codice quali sono le personalizzazioni del tag object/embed.
Vediamo i parametri disponibili:
| Codice: |
<object
classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616"
id="[id (necessario se utilizzate javascript per riferirlo)]"
width="[larghezza]"
height="[altezza]"
codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<!--parametri OBJECT necessari-->
<param name="src" value="[Percorso file divx]" />
<!--parametri OBJECT aggiuntivi-->
<param name="mode" value="[null|zero|mini|large|full]" />
<param name="minVersion" value="[valore versione]" />
<param name="allowContextMenu" value="[true|false]" />
<param name="autoPlay" value="[true|false]" />
<param name="loop" value="[true|false]" />
<param name="bufferingMode" value="[null|auto|full]" />
<!--parametri OBJECT per gestire gli eventi -->
<param name="statusCallback" value="[Funzione assegnata]" />
<param name="timeCallback" value="[Funzione assegnata]" />
<param name="bufferCallback" value="[Funzione assegnata]" />
<param name="downloadCallback" value="[Funzione assegnata]" />
<!--parametri EMBED -->
<embed id="[id (necessario se utilizzate javascript per riferirlo)]"
type="video/divx"
pluginspage="http://go.divx.com/plugin/download/"
width="[larghezza]"
height="[altezza]"
src="[Percorso file divx]"
minVersion="[valore versione]"
allowContextMenu="[true|false]"
mode="[null|zero|mini|large|full]"
autoPlay="[true|false]"
loop="[true|false]"
bufferingMode="[null|auto|full]"
statusCallback="[Funzione assegnata]"
timeCallback="[Funzione assegnata]"
bufferCallback="[Funzione assegnata]"
downloadCallback="[Funzione assegnata]"> </embed>
</object>
|
ATTRIBUTI OJBECT NECESSARI
classid
Deve essere precisamente "clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" necessario ad IE a riconoscere il tipo di oggetto
width ed height: rispettivamente la larghezza e l'altezza del video (a seconda di che parametro "mode" utilizzate dovete contemplare spazio aggiuntivo in altezza per la visualizzazione delle barre - vedi parametro mode + sotto)
codebase
Deve essere precisamente "link" necessario per il download del plugin
a questo va' aggiunto almeno il parametro obbligatorio SRC per specificare il percorso del file
<param name="src" value="/mymovie/myfile.divx" />
ATTRIBUTI EMBED NECESSARI
type
Deve essere precisamente "video/divx" che è il giusto mimetype
pluginspage
Deve essere precisamente http://go.divx.com/plugin/download/
width ed height rispettivamente larghezza ed altezza (vedi sezione Mode)
src il percorso del file divx.
I File ammessi devono avere estensione .divx, .avi, .div.
Se il nome del file termina con _ns automaticamente dal menu contestuale viene disabilitato il salvataggio del file video (es. miovideo_ns.divx)
CONFIGURAZIONI AVANZATE
i parametri di configurazione avanzate vengono inseriti sia nel tag OBJECT con la sintassi
<param name="NOME PARAMETRO" value="VALORE PARAMETRO" />
mentre nel tag EMBED vengono aggiunti a livello di attributo
<embed ....... nomeparametro="VALORE PARAMETRO" .....> </embed>
mode
Mode specifica quali controllers deve avere il player:
null non esiste nessun controllo
zero appare un mini box fluttuante con play, stop e controllo volume
mini predefinito, appare la barra di navigazione con i controlli principali.
la barra è 20 pixel alta e giace nel bottom del filmato. Dovete quindi contemplare un 20px di altezza in + per la barra quando specificate il parametro height.
large: il player mostra la barra completa dei controlli alta 65pixel sul bottom del filmato. Contemplate quindi 65pixel in + nel parametro height per non nascondere parte del vostro filmato.
full: il player mostra la barra completa dei controlli + una barra aggiuntiva nel top del filmato alta 25 pixel. Contemplate quindi 90pixel in + nel parametro height.
minVersion
il valore è un campo di 3 caratteri separati da punti (es. 0.0.9 o 1.0.0)
parametro diciamo inutile al momento. Serve cmq per specificare la versione minima del divx plugin necessaria per visualizzare il filmato.
allowContextMenu
il valore permesso è true oppure false
Permette di mostrare il menu contestuale (tasto destro) che permette operazioni svariate da parte dell'utente.
autoPlay
il valore permesso è true oppure false.
True per fare partire automaticamente il filmato . False il contrario.
loop
il valore permesso è true oppure false.
True per rendere ciclica la riproduzione, False viene eseguita una sola volta
bufferingMode
valori possibili:
null: Il filmato ha un buffering minimo. Il filmato verra' eseguito il + presto possibile. Ottimale solo se preventivate connessioni veloci (adsl etc).
auto:
Il plugin pensa automaticamente al preload calcolando la velocita' di connessione del client in modo da garantire un filmato fluido
full
in questo caso il filmato prima di essere riprodotto viene caricato completamente.
PARAMETRI DI INTERFACCIAMENTO CON JAVASCRIPT
Il Plugin istalla automaticamente un API javascript che permette di impostare le caratteristiche del player direttamente da codice.
Per fare questo è necessario impostare un ID di riferimento sia al tag OBJECT che EMBED.
Negli esempi della SDK viene utilizzato questo esempio:
| Codice: |
'tagliato
<body>
<object id="ieplugin" ? >
<embed id="npplugin" ? ></embed>
</object>
<script language="Javascript">
var plugin;
if(navigator.userAgent.indexOf('MSIE') != -1)
plugin = document.getElementById('ieplugin');
else
plugin = document.getElementById('npplugin');
</script>
</body>
|
Vedremo sotto il DOM javascript che interagisce con il plugin.
Durante la visualizzazione,il caricamento etc il plugin scatena degli eventi che tramite funzioni di callback possono essere gestite dal programmatore.
Ogni funzione ha la sua struttura e viene assegnata tramite i parametri aggiuntivi:
statusCallBack
statusCallBack rappresenta tutti i segnali raw di tutti i cambiamenti dello status del plugin.
la funzione segnaposto deve avere una struttura del genere
| Codice: | <script type="text/javascript">
function myStatusCallback (msg){
alert("Evento Scatenato: " + msg);
}
</script>
....
<param name="statusCallBack" value="myStatusCallBack" />
<embed ...... statusCallBack="myStatusCallBack" ....> </embed>
|
gli eventi possibili sono: INIT_DONE, OPEN_DONE, VIDEO_END, SHUT_DONE, EMBEDDED_START, EMBEDDED_END,WINDOWED_START, WINDOWED_END, FULLSCREEN_START, FULLSCREEN_END, PLAY_START, PLAY_END, PAUSE_START, PAUSE_END, FF_START, FF_END, RW_START, RW_END, VIDEO_STOPPED, BUFFERING_START, BUFFERING_STOP, DOWNLOAD_START, DOWNLOAD_FAILED, DOWNLOAD_DONE, DOWNLOAD_BROKE
timeCallBack
l'evento timeCallBack scatta ad ogni secondo di riproduzione e manda come informazione i secondo corrente di riproduzione.
| Codice: | <script type="text/javascript">
function myTimeCallback (second){
document.getElementById("secondi") = second;
}
</script>
....
<param name="timeCallback" value="myTimeCallback" />
<embed ...... timeCallback="myTimeCallback" ....> </embed>
riproduzione: <div id="secondi"> </div> secondi
|
bufferCallback
L'evento bufferCallBack si scatena durante il preload del file video e restituisce il valore corrente del buffer caricato e il totale buffer da caricare (in bytes)
| Codice: | <script type="text/javascript">
function myBufferCallback (current, total){
document.getElementById("bufferload") = current + " / " + total + " bytes di buffer caricato";
}
</script>
....
<param name="bufferCallback" value="myBufferCallback" />
<embed ...... bufferCallback="myBufferCallback" ....> </embed>
buffer: <div id="bufferload"> </div>
|
downloadCallback
l'evento downloadCallBack è uguale a bufferCallBack solo che informa sullo stato di caricamento dell'intero filmato:
| Codice: | <script type="text/javascript">
function mydownloadCallback (current, total){
document.getElementById("movieLoad") = current + " / " + total + " byte di film caricato";
}
</script>
....
<param name="downloadCallback" value="mydownloadCallback" />
<embed ...... downloadCallback="mydownloadCallback" ....> </embed>
buffer: <div id="movieLoad"> </div>
|
JAVASCRIPT API
Abbiamo visto come rendere visibile il vostro video a javascript (tramite id).
ora vediamo i metodi.
//la variabile plugin è riferita all'esempio sopra
//plugin = document.getElementById(id_del_plugin)
plugin.GetVersion();
ottiene una stringa rappresentante la funzione (es. alert(plugin.GetVersion(); )
plugin.SetMinVersion(string version);
richiede al minimo la versione specificata per poter essere visualizzato (es. plugin.setMinorVersion("0.0.9");
plugin.SetMode(string mode);
Imposta il tipo di visualizzazione (vedi sezione mode)
esempio:
plugin.SetMode("mini");
plugin.SetAllowContextMenu(boolean allow);
Permette di rendere visibile o no il menu al tasto destro sul filmato
esempio:
plugin.SetAllowContextMenu(false);
plugin.SetAutoPlay(boolean play);
Imposta/disattiva l'autoplay
esempio:
plugin.SetAutoPlay(true);
plugin.SetLoop(boolean loop);
Imposta/disattiva la visualizzazione cliclica
esempio:
plugin.SetLoop(false);
plugin.SetVolume(unsigned long volume);
Imposta il volume di riproduzione.
Esempio.
plugin.SetVolume(90);
plugin.Open(string URL);
Carica un file video
Esempio:
plugin.Open("/myMovies/miovideo.divx");
plugin.Play();
Riproduce il filmato
plugin.Pause();
Mette in pausa il filmato
plugin.StepForward();
Manda avanti il filmato di un fotogramma;
plugin.StepBackward();
Manda indietro il filmato di un fotogramma;
plugin.FF();
Manda avanti veloce il filmato
plugin.RW();
Manda indietro veloce il filmato.
plugin.Stop();
Interrompe il filmato
plugin.Mute();
Rende il filmato muto.
plugin.UnMute();
Annulla la modalita' muto.
plugin.Seek(unsigned long percent);
Ricerca la posizione all'interno del filmato .
Es.
plugin.Seek(90);
plugin.About();
Mostra le informazioni sul plugin
plugin.ShowPreferences();
Mostra il pannello per impostare le preferenze del plugin
plugin.ShowContextMenu();
Mostra il menu contestuale (click destro sul filmato)
plugin.GoEmbedded();
Rende il filmato nella versione Incorporata (di default il filmato è incorporato nel tag object)
plugin.GoWindowed();
Apre il filmato in finestra esterna tramite popup
plugin.GoFullscreen();
Apre il filmato a schermo intero.
plugin.Resize(unsigned long width,unsigned long height);
Permette di ridimensionare il filmato
Esempio:
plugin.Resize(200,300)
plugin.GetTotalTime();
Restituisce il tempo totale (in secondi)
plugin.GetVideoWidth();
Restituisce la larghezza del filmato
plugin.GetVideoHeight();
Restituisce l'altezza del filmato
plugin.GetTotalVideoFrames();
Restituisce il numero di fotogrammi totali del filmato
plugin.GetVideoFramerate();
Restituisce il framerate (frequenza dei fotogrammi) del filmato
L'ultima modifica di kluster il 02 Dic 2006 17:02, modificato 1 volta |
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
