La funzione seguente, denominata
setVideoEvents, consente di assegnare dei listener per la gestione degli eventi che riguarderanno il video. In particolare l’evento
loadedmetadata, invocato dopo la ricezione dei metadati scrive nel
div c_text_and_duration la durata del video, che è ritornata in secondi tramite la proprietà
duration, formattata con il pattern
hh:mm:ss; l’evento
progress invocato durante il downloading del video fa apparire un’immagine di
loader solo se la proprietà
networkState è uguale alla costante
NETWORK_LOADING; l’evento
loadeddata, invocato quando c’è almeno un frame video da poter riprodurre, imposta la corrente posizione di riproduzione a 1/10 di secondo, dove presumibilmente potremo trovare un frame da visualizzare; l’evento
timeupdate, invocato quando c’è un avanzamento del playback del video, aggiorna il
div c_text_and_duration scrivendo la corrente progressione temporale.
setVideoEvents: function (ve)
{ // ci sono i metadati? allora dammi la durata del video
ve.addEventListener("loadedmetadata", function () { PLAYER.formatDuration(ve.duration);
}, false);
// stai caricando la risorsa?
ve.addEventListener("progress", function () { if (ve.networkState == ve.NETWORK_LOADING)
{ PLAYER.setLoaderVisibility("visible"); }
else
PLAYER.setLoaderVisibility("hidden");
}, false);
// dati sufficienti per il play
ve.addEventListener("loadeddata", function () { ve.currentTime = 0.1
}, false);
// aggiornamento del tempo di riproduzione
ve.addEventListener("timeupdate", function () { PLAYER.formatDuration(); }, false);}
Abbiamo poi la funzione
loaderCreation, che crea i
div rappresentativi dell’immagine di loading:
loaderCreation: function (ve)
{ // loader
var loader_d_1 = document.createElement("div"); loader_d_1.id = "loader_d_1";
loader_d_1.style.backgroundImage = "url(img/loader.png)";
loader_d_1.style.backgroundRepeat = "no-repeat";
loader_d_1.style.width = "150px";
loader_d_1.style.height = "25px";
loader_d_1.style.position = "absolute";
loader_d_1.style.left = "460px";
loader_d_1.style.top = "385px";
loader_d_1.style.visibility = "hidden";
loader_d_1.style.zIndex = "99";
document.documentElement.appendChild(loader_d_1);
var loader_d_2 = document.createElement("div"); loader_d_2.id = "loader_d_2";
loader_d_2.style.backgroundImage = "url(img/loading.gif)";
loader_d_2.style.backgroundRepeat = "no-repeat";
loader_d_2.style.width = "32px";
loader_d_2.style.height = "32px";
loader_d_2.style.position = "absolute";
loader_d_2.style.left = "570px";
loader_d_2.style.top = "380px";
loader_d_2.style.visibility = "hidden";
loader_d_2.style.zIndex = "100";
document.documentElement.appendChild(loader_d_2);
}
mentre la funzione
noFullscreenIcon crea il
div con un'immagine che apparirà dopo che porremo in fullscreen la visualizzazione della risorsa, e che consentirà di riportarla in modalità no fullscreen. E’ interessante notare come assegniamo a esso un evento clic il cui
handler crea e invia un evento di clic programmatico al
div c_fullscreen, che consente di attivarlo come se l’utente l’avesse fisicamente premuto:
noFullscreenIcon: function ()
{ var fsi = document.createElement("div"); fsi.id = "fsi";
fsi.style.backgroundImage = "url(img/no_fullscreen.png)";
fsi.style.backgroundRepeat = "no-repeat";
fsi.style.width = "32px";
fsi.style.height = "32px";
fsi.style.position = "absolute";
fsi.style.left = "10px";
fsi.style.top = "10px";
fsi.style.visibility = "hidden";
fsi.style.cursor = "pointer";
fsi.title = "no fullscreen";
fsi.style.zIndex = "101";
document.documentElement.appendChild(fsi);
// click programmatico... sul div del controllo fullscreen
fsi.addEventListener("click", function ()
{ var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("c_fullscreen").dispatchEvent(evt);
}, false);
}
- Pubblicazioni correlate:
- 10-05-2010 Guida ad HTML5: storia della sua nascita (1/3)
- 11-05-2010 Guida ad HTML5: storia della sua nascita (2/3)
- 17-05-2010 Guida ad HTML5: storia della sua nascita (3/3)
- 18-05-2010 Guida ad HTML5: supporto dei browser (1/6)
- 24-05-2010 Guida ad HTML5: supporto dei browser (2/6)
- 25-05-2010 Guida ad HTML5: supporto dei browser (3/6)
- 31-05-2010 Guida ad HTML5: supporto dei browser (4/6)
- 01-06-2010 Guida ad HTML5: supporto dei browser (5/6)
- 07-06-2010 Guida ad HTML5: supporto dei browser (6/6)
- 08-06-2010 Guida ad HTML5: l'elemento canvas, l'area del disegno
- 14-06-2010 Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (1/4)
- 18-06-2010 Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (2/4)
- 21-06-2010 Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (3/4)
- 25-06-2010 Guida ad HTML5: l’elemento canvas, disegno di forme geometriche (4/4)
- 28-06-2010 Guida ad HTML5: l’elemento canvas, immagini e testo (1/4)
- 02-07-2010 Guida ad HTML5: l’elemento canvas, immagini e testo (2/4)
- 05-07-2010 Guida ad HTML5: l’elemento canvas, immagini e testo (3/4)
- 09-07-2010 Guida ad HTML5: l’elemento canvas, immagini e testo (4/4)
- 12-07-2010 Guida ad HTML5: l’elemento canvas, manipolazione diretta dei pixel (1/2)
- 16-07-2010 Guida ad HTML5: l’elemento canvas, manipolazione diretta dei pixel (2/2)
- 19-07-2010 Guida ad HTML5: l’elemento canvas, sfumature
- 23-07-2010 Guida ad HTML5: l’elemento canvas, ombreggiature
- 26-07-2010 Guida ad HTML5: l’elemento canvas, compositing (1/2)
- 30-07-2010 Guida ad HTML5: l’elemento canvas, compositing (2/2)
- 30-08-2010 Guida ad HTML5: l’elemento canvas, stili di linea e pattern (1/2)
- 03-09-2010 Guida ad HTML5: l’elemento canvas, stili di linea e pattern (2/2)
- 06-09-2010 Guida ad HTML5: multimedialità, concetti propedeutici (1/2)
- 10-09-2010 Guida ad HTML5: multimedialità, concetti propedeutici (2/2)
- 13-09-2010 Guida ad HTML5: multimedialità, l'elemento video
- 17-09-2010 Guida ad HTML5: multimedialità, gli elementi audio e source
- 20-09-2010 Guida ad HTML5: multimedialità, scripting dei media element (1/6)
- 24-09-2010 Guida ad HTML5: multimedialità, scripting dei media element (2/6)
- 27-09-2010 Guida ad HTML5: multimedialità, scripting dei media element (3/6)
- 01-10-2010 Guida ad HTML5: multimedialità, scripting dei media element (4/6)
- 04-10-2010 Guida ad HTML5: multimedialità, scripting dei media element (5/6)
- 08-10-2010 Guida ad HTML5: multimedialità, scripting dei media element (6/6)
- 11-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (1/7)
- 15-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (2/7)
- 20-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (3/7)
- 22-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (4/7)
- 29-10-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (6/7)
- 05-11-2010 Guida ad HTML5: multimedialità, realizzazione di un player video (7/7)
- 08-11-2010 Guida ad HTML5: storage per le web application (1/3)
- 12-11-2010 Guida ad HTML5: storage per le web application (2/3)
- 15-11-2010 Guida ad HTML5: storage per le web application (3/3)
- 19-11-2010 Guida ad HTML5: eseguire codice JavaScript in background (1/3)
- 22-11-2010 Guida ad HTML5: eseguire codice JavaScript in background (2/3)
- 26-11-2010 Guida ad HTML5: eseguire codice JavaScript in background (3/3)
- 29-11-2010 Guida ad HTML5: applicazioni web offline (1/5)
- 03-12-2010 Guida ad HTML5: applicazioni web offline (2/5)
- 06-12-2010 Guida ad HTML5: applicazioni web offline (3/5)
- 10-12-2010 Guida ad HTML5: applicazioni web offline (4/5)
- 13-12-2010 Guida ad HTML5: applicazioni web offline (5/5)
- 17-12-2010 Guida ad HTML5: la geolocalizzazione (1/4)
- 20-12-2010 Guida ad HTML5: la geolocalizzazione (2/4)
- 24-12-2010 Guida ad HTML5: la geolocalizzazione (3/4)
- 27-12-2010 Guida ad HTML5: la geolocalizzazione (4/4)
- 31-12-2010 Guida ad HTML5: microdata (1/4)
- 03-01-2011 Guida ad HTML5: microdata (2/4)
- 10-01-2011 Guida ad HTML5: microdata (3/4)
- 14-01-2011 Guida ad HTML5: microdata (4/4)
- 17-01-2011 Guida ad HTML5: drag and drop (1/5)
- 21-01-2011 Guida ad HTML5: drag and drop (2/5)
- 24-01-2011 Guida ad HTML5: drag and drop (3/5)
- 28-01-2011 Guida ad HTML5: drag and drop (4/5)
- 31-01-2011 Guida ad HTML5: drag and drop (5/5)
- 04-02-2011 Guida ad HTML5: nuovi elementi semantici (1/6)
- 07-02-2011 Guida ad HTML5: nuovi elementi semantici (2/6)
- 11-02-2011 Guida ad HTML5: nuovi elementi semantici (3/6)
- 14-02-2011 Guida ad HTML5: nuovi elementi semantici (4/6)
- 18-02-2011 Guida ad HTML5: nuovi elementi semantici (5/6)
- 21-02-2011 Guida ad HTML5: nuovi elementi semantici (6/6)
- 25-02-2011 Guida ad HTML5: l’API di messaggistica (1/8)
- 28-02-2011 Guida ad HTML5: l’API di messaggistica (2/8)
- 04-03-2011 Guida ad HTML5: l’API di messaggistica (3/8)
- 07-03-2011 Guida ad HTML5: l’API di messaggistica (4/8)
- 11-03-2011 Guida ad HTML5: l’API di messaggistica (5/8)
- 14-03-2011 Guida ad HTML5: l’API di messaggistica (6/8)
- 18-03-2011 Guida ad HTML5: l’API di messaggistica (7/8)
- 21-03-2011 Guida ad HTML5: l’API di messaggistica (8/8)