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
Allegato
Guida ad HTML5: multimedialità, realizzazione di un player video (3/7)
Scritto da Pellegrino Principe il 20-10-2010 ore 11:48
Intel Parallel Studio XE
Presentiamo ora il codice JavaScript, che realizza il behavior layer e che consente di far “vivere” il nostro player video. Il file completo, denominato player.js è qui allegato, per chi volesse studiarlo autonomamente; da quest’articolo e per i prossimi procederemo a un’analisi passo passo dei suoi elementi costitutivi. Inoltre, il progetto completo verrà messo a disposizione nell'ultimo contributo dedicato al player video, ma è utilizzabile da subito online, per testarne il funzionamento; a tal fine si consiglia l'uso di una delle ultime versioni di Firefox, che è, allo stato attuale, il browser che maggiormente supporta le nuove funzionalità dell’elemento video.

Iniziamo dicendo che abbiamo un oggetto che rappresenta l’astrazione del player, denominato PLAYER, del quale, in risposta all’evento load della pagina, viene invocato la seguente funzione init, che dopo l’ottenimento dell’elemento video verifica se il browser corrente può riprodurre i video OGG con codec Theora e Vorbis.

In caso negativo invochiamo la funzione prepareFallbackContent, che prepara il contenuto da visualizzare indicante la non riproducibilità della risorsa video, mentre in caso positivo invochiamo le funzioni: setVideoEvents, che imposta i gestori di eventi per l’oggetto video; setControlsEvents, che imposta il gestore dell’evento click sui controlli e che permette di rispondere appropriatamente alla pressione dei tasti play, pause, stop, ecc.; loaderCreation, che crea degli elementi DIV con delle immagini rappresentanti lo stato di loading del video; noFullscreenIcon, che crea un elemento DIV con un’immagine rappresentante lo stato di ripristino alla modalità no fullscreen, che sarà visualizzata solo allorquando lo schermo entrerà in modalità fullscreen.
  1. init: function ()
  2. {
  3.     PLAYER.video_element = document.getElementById("video_container");
  4.  
  5.     // verifichiamo se il browser corrente può riprodurre
  6.     // i video ogg con codecs theora e vorbis   
  7.     if (!!PLAYER.video_element.canPlayType &&
  8.         PLAYER.video_element.canPlayType(PLAYER.media_type) == "")
  9.     {
  10.         PLAYER.prepareFallbackContent(PLAYER.video_element);
  11.     }
  12.     else
  13.     {
  14.         // imposto gli eventi per il video
  15.         PLAYER.setVideoEvents(PLAYER.video_element);
  16.  
  17.         // imposto gli eventi per i controlli
  18.         PLAYER.setControlsEvents(PLAYER.video_element);
  19.  
  20.         // creo il loader
  21.         PLAYER.loaderCreation();
  22.  
  23.         // creo l'icona per il no fullscreen
  24.         PLAYER.noFullscreenIcon();
  25.  
  26.         PLAYER.video_element.setAttribute("preload", "none");
  27.  
  28.         // eventi per la playlist
  29.         document.getElementById("playlist").addEventListener("click", PLAYER.manageTracks, false);
  30.     }
  31. }
Formato: ZIP (Compressed Archive File)
Dimensione: 3.17 KB
Codice per il download:  
Tutti gli allegati vengono testati, pertanto se non riesci ad aprire un file PDF perché il tuo viewer dice che il file è corrotto, installa l'ultima versione di Adobe Reader, disponibile sia per Windows, che per Mac OS X e Linux/Unix. Nel caso il problema persista segnala l'errore alla redazione usando l'apposita icona (quella che raffigura uno scarafaggio) della toolbar qui sotto.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: I risultati di un test sulle performance dei CMS
Successiva: Una competizione per i programmatori in ambito NASA
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.303 secondi.