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
Guida ad HTML5: multimedialità, realizzazione di un player video (6/7)
Scritto da Pellegrino Principe il 29-10-2010 ore 07:54
La seguente funzione setControlsEvents assegna un gestore per l'evento click sul div che contiene i controlli di playback, consentendo di eseguire delle azioni di riproduzione del video, appropriate alla scelta dell'utente:
  1. setControlsEvents: function (ve)
  2. {
  3.     document.getElementById("controls").addEventListener("click",
  4.     function (ev)
  5.     {
  6.         if (ev.target.tagName == "DIV")
  7.         {
  8.             switch (ev.target.id)
  9.             {
  10.                 case "c_play":
  11.                     ve.play();
  12.                     break;
  13.                 case "c_pause":
  14.                     ve.pause();
  15.                     break;
  16.                 case "c_stop":
  17.                     ve.currentTime = 0.1;
  18.                     ve.pause();
  19.                     break;
  20.                 case "c_volume_up":
  21.                     if (ve.volume < 1)
  22.                         ve.volume += 0.1;
  23.                     break;
  24.                 case "c_volume_down":
  25.                     if (ve.volume > 0.1)
  26.                         ve.volume -= 0.1;
  27.                     break;
  28.                 case "c_volume_on_off":
  29.                     ve.muted = !ve.muted;
  30.                     ev.target.style.backgroundImage = ve.muted ? "url(img/sound_mute.png)" :
  31.                     "url(img/sound.png)";
  32.                     break;
  33.                 case "c_forw":
  34.                     ve.playbackRate += 1;
  35.                     break;
  36.                 case "c_rew":
  37.                     ve.playbackRate += -1;
  38.                     break;
  39.                 case "c_start":
  40.                     ve.currentTime = 0.1;
  41.                     break;
  42.                 case "c_end":
  43.                     ve.currentTime = ve.duration;
  44.                     break;
  45.                 case "c_fullscreen":
  46.                     PLAYER.is_fullscreen = !PLAYER.is_fullscreen;
  47.  
  48.                     var pl = document.getElementById("playlist");
  49.                     var cop = document.getElementById("copyright");
  50.                     var ctr = document.getElementById("controls");
  51.                     var fsi = document.getElementById("fsi");
  52.                     var load_1 = document.getElementById("loader_d_1");
  53.                     var load_2 = document.getElementById("loader_d_2");
  54.  
  55.                     if (PLAYER.is_fullscreen)
  56.                     {
  57.                         var h = document.documentElement.clientHeight;
  58.                         var w = document.documentElement.clientWidth;
  59.  
  60.                         // ...CODICE OMESSO PER RAGIONI DI SPAZIO...
  61.  
  62.                         // se ci sono pixel in più per la scrollbar aggiusta...
  63.                         if (document.documentElement.scrollHeight > document.documentElement.clientHeight)
  64.                         {
  65.                             ve.style.height = ve.height = (parseInt(ve.style.height) -
  66.                             (document.documentElement.scrollHeight - document.documentElement.clientHeight)) + "px";
  67.                         }
  68.  
  69.                         if (document.documentElement.scrollWidth > document.documentElement.clientWidth)
  70.                         {
  71.                             ve.style.width = ve.width = (parseInt(ve.style.width) -
  72.                             (document.documentElement.scrollWidth - document.documentElement.clientWidth)) + "px";
  73.                         }
  74.  
  75.                         // se attivo il loader riposizionalo
  76.                         PLAYER.setLoaderPosition(load_1, load_2, true);
  77.                     }
  78.                     else
  79.                     {
  80.                         // ...CODICE OMESSO PER RAGIONI DI SPAZIO...
  81.  
  82.                         // se attivo il loader riposizionalo
  83.                         PLAYER.setLoaderPosition(load_1, load_2, false);
  84.                     }
  85.             }
  86.  
  87.         }
  88.     }, false);
  89. }
La logica di funzionamento del listato è molto semplice, e infatti quando l'utente cliccherà su di un div contenuto all'interno del div dei controlli, esso diventerà il target dell'evento, ovvero l'oggetto il cui id sarà comparato all'interno del costrutto switch.

Così, se ad esempio, il div target avrà l'id c_play, allora eseguiremo il relativo codice, scritto nell'ambito dell'etichetta case corrispondente, che avvierà la riproduzione della risorsa multimediale.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Struttura e progetto dei calcolatori
Successiva: Un nuovo tipo di semaforo per le applicazioni multicore
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.285 secondi.