Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Greenpeace
Guida ad HTML5: multimedialità, realizzazione di un player video (5/7)
Scritto da Pellegrino Principe il 25-10-2010 ore 10:07
Intel Parallel Studio XE
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.
  1. setVideoEvents: function (ve)
  2. {
  3.     // ci sono i metadati? allora dammi la durata del video
  4.     ve.addEventListener("loadedmetadata", function ()
  5.     {
  6.         PLAYER.formatDuration(ve.duration);
  7.  
  8.     }, false);
  9.  
  10.     // stai caricando la risorsa?
  11.     ve.addEventListener("progress", function ()
  12.     {
  13.         if (ve.networkState == ve.NETWORK_LOADING)
  14.         {
  15.             PLAYER.setLoaderVisibility("visible");
  16.         }
  17.         else
  18.             PLAYER.setLoaderVisibility("hidden");
  19.  
  20.     }, false);
  21.  
  22.     // dati sufficienti per il play
  23.     ve.addEventListener("loadeddata", function ()
  24.     {
  25.         ve.currentTime = 0.1
  26.  
  27.     }, false);
  28.  
  29.     // aggiornamento del tempo di riproduzione
  30.     ve.addEventListener("timeupdate", function () { PLAYER.formatDuration(); }, false);
  31. }
Abbiamo poi la funzione loaderCreation, che crea i div rappresentativi dell’immagine di loading:
  1. loaderCreation: function (ve)
  2. {
  3.     // loader
  4.     var loader_d_1 = document.createElement("div");
  5.     loader_d_1.id = "loader_d_1";
  6.     loader_d_1.style.backgroundImage = "url(img/loader.png)";
  7.     loader_d_1.style.backgroundRepeat = "no-repeat";
  8.     loader_d_1.style.width = "150px";
  9.     loader_d_1.style.height = "25px";
  10.     loader_d_1.style.position = "absolute";
  11.     loader_d_1.style.left = "460px";
  12.     loader_d_1.style.top = "385px";
  13.     loader_d_1.style.visibility = "hidden";
  14.     loader_d_1.style.zIndex = "99";
  15.     document.documentElement.appendChild(loader_d_1);
  16.  
  17.     var loader_d_2 = document.createElement("div");
  18.     loader_d_2.id = "loader_d_2";
  19.     loader_d_2.style.backgroundImage = "url(img/loading.gif)";
  20.     loader_d_2.style.backgroundRepeat = "no-repeat";
  21.     loader_d_2.style.width = "32px";
  22.     loader_d_2.style.height = "32px";
  23.     loader_d_2.style.position = "absolute";
  24.     loader_d_2.style.left = "570px";
  25.     loader_d_2.style.top = "380px";
  26.     loader_d_2.style.visibility = "hidden";
  27.     loader_d_2.style.zIndex = "100";
  28.     document.documentElement.appendChild(loader_d_2);
  29. }
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:
  1. noFullscreenIcon: function ()
  2. {
  3.     var fsi = document.createElement("div");
  4.     fsi.id = "fsi";
  5.     fsi.style.backgroundImage = "url(img/no_fullscreen.png)";
  6.     fsi.style.backgroundRepeat = "no-repeat";
  7.     fsi.style.width = "32px";
  8.     fsi.style.height = "32px";
  9.     fsi.style.position = "absolute";
  10.     fsi.style.left = "10px";
  11.     fsi.style.top = "10px";
  12.     fsi.style.visibility = "hidden";
  13.     fsi.style.cursor = "pointer";
  14.     fsi.title = "no fullscreen";
  15.     fsi.style.zIndex = "101";
  16.     document.documentElement.appendChild(fsi);
  17.  
  18.     // click programmatico... sul div del controllo fullscreen
  19.     fsi.addEventListener("click",
  20.     function ()
  21.     {
  22.         var evt = document.createEvent("MouseEvents");
  23.         evt.initMouseEvent("click", true, true, window,
  24.             0, 0, 0, 0, 0, false, false, false, false, 0, null);
  25.  
  26.         document.getElementById("c_fullscreen").dispatchEvent(evt);
  27.  
  28.     }, false);
  29. }
Precedente: Serializzare file XML di grandi dimensioni in .NET
Successiva: Un metodo economico per inviare SMS con Arduino
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.301 secondi.