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 (1/7)
Scritto da Pellegrino Principe il 11-10-2010 ore 09:47
Dopo aver illustrato nei precedenti articoli la teoria sottostante alla gestione delle API multimediali, messe a disposizione da HTML 5, vediamo ora, in pratica, come realizzare un semplice player di risorse di tipo video.

Il progetto è denominato SimplePlayer e ne potete trovare, e provare, un’anteprima, nella quale per il momento sono attivi solo lo structural layer (il codice XHTML) e il presentation layer (il codice CSS); nell'articolo finale implementeremo, invece, il behavior layer (il codice JavaScript).

Per quanto attiene al layer strutturale esso è composto dal seguente file player.html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <link href="player.css" rel="stylesheet" type="text/css" />
  5.     <script src="player.js" type="text/javascript"></script>
  6.     <script type="text/javascript">
  7.            window.addEventListener("load", PLAYER.init, false);
  8.     </script>
  9.     <title>SimplePlayer V0.1 By Pellegrino ~thp~ Principe</title>
  10. </head>
  11. <body>
  12.     <video id="video_container" width="600" height="400" class="vc" poster="img/poster.png"></video>
  13.     <div id="controls">
  14.         <div id="c_start" class="c_main" title="Start"></div>
  15.         <div id="c_rew" class="c_main" title="Rewind"></div>
  16.         <div id="c_play" class="c_main" title="Play"></div>
  17.         <div id="c_pause" class="c_main" title="Pause"></div>
  18.         <div id="c_stop" class="c_main" title="Stop"></div>
  19.         <div id="c_forw" class="c_main" title="Fast Forward"></div>
  20.         <div id="c_end" class="c_main" title="End"></div>
  21.         <div id="c_text_and_duration" class="c_main" title="Current Time/ Duration">00:00:00 / 00:00:00</div>
  22.         <div id="c_volume_up" class="c_main" title="Volume UP"></div>
  23.         <div id="c_volume_down" class="c_main" title="Volume DOWN"></div>
  24.         <div id="c_volume_on_off" class="c_main" title="Volume ON/OFF"></div>
  25.         <div id="c_fullscreen" class="c_main" title="Fullscreen"></div>
  26.     </div>
  27.     <div id="playlist">
  28.         <div id="track 1">Wikimedia Italia Wikiguida 2 By Christian Biasco e Francesca Terri</div>
  29.         <div id="track 2">Pier HolyIsle Waves By Secretlondon</div>
  30.         <div id="track 3">Sunset Time Lapse 31-12-2009 By XtUProductions</div>
  31.         <div id="track 4">Galaxy Collision By Eclipse.sx</div>
  32.         <div id="track 5">Speedsolving a 3×3×3 Rubik's Cube with Fridrich Method By Euku</div>
  33.     </div>
  34.   <div id="copyright">© All video files are licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.
  35.     Logo icons from Nuvola theme (KDE 3) design by David Vignoni (GPL). Controls icons by FatCow Web Hosting under Creative Commons Attribution 3.0 United States.</div>
  36. </body>
  37. </html>
Creiamo la struttura del player che è principalmente composta: da un elemento video; un elemento div (id=controls) al cui interno sono posti altri div, ognuno rappresentante un singolo controllo (play, pause, stop, ecc.); da un elemento div (id=playlist) al cui interno sono posti altri cinque div ciascuno rappresentante una traccia da riprodurre; da un div dove è indicata la licenza per i file video da visualizzare. Esso include, inoltre, i file player.css e player.js e assegna un evento load all'oggetto window, che consente di invocare, al termine del caricamento della pagina HTML, la funzione init, per l'inizializzazione dell'oggetto PLAYER, al cui interno è scritta la logica di gestione del riproduttore multimediale.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Fotocamere analogiche e digitali: la risoluzione (6/6)
Successiva: Lavorare con i LINQ provider e l'interfaccia IQueryable< T >
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.262 secondi.