HTML/XHTML  »  Articoli  »  HTML5 

Video e audio

Negli ultimi anni l'audio e il video sul Web sono diventati piuttosto comuni. Siti come YouTube, Viddler, Revver, MySpace e tanti altri hanno reso estremamente semplice per tutti pubblicare video e audio. Ma, dal momento che HTML è privo dei mezzi necessari per incorporare elementi multimediali nella pagina e per controllarli, la maggior parte di questi servizi si affida a Flash per fornire queste funzionalità.

Sebbene sia possibile incorporare audio e video usando specifici plug-in (come QuickTime, Windows Media, Silverlight, etc), Flash è al momento il plug-in più universalmente diffuso e perciò in grado di offrire un vasto supporto cross-browser, oltre che un potente set di API per gli sviluppatori.

Come è evidente dall'analisi dei principali player multimediali basati su Flash, gli autori sono interessati ad offrire agli utenti interfacce specifiche e customizzate che in genere consentono l'esecuzione di file, la pausa, lo stop, la regolazione del volume. Il progetto è quello di offrire queste funzionalità aggiungendo nel linguaggio HTML un supporto nativo per la gestione di audio e video e fornendo API del DOM per il loro controllo.

I nuovi elementi <audio> e <video> rendono il tutto molto semplice. La maggior parte delle API sono condivise tra i due elementi, con l'unica differenza legata all'intrinseca diversità dei formati.

Il modo più semplice per incorporare un video consiste nell'usare un elemento video e consentire al browser di fornire l'interfaccia utente di base. L'attributo controls è di tipo booleano ed indica se vogliamo o no offrire i controlli per il playback:

<video src="video.ogv" controls poster="poster.jpg" 
       width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

L'attributo opzionale poster può essere usato per specificare un'immagine, che sarà visualizzata al posto del video prima che esso inizi. Sebbene vi siano formati video che supportano il loro poster frame, come MPEG-4, ciò fornisce un'alternativa che può funzionare a prescindere dal formato video usato.

source

HTML 5 fornisce pure l'elemento <source> per specificare file video o audio alternativi. L'attributo media può essere usato per specificare una media query per la selezione di file o formati basati sul dispositivo con cui si raggiunge la pagina, l'attributo type serve a specificare il tipo di media e il codec. Si noti che quando si usa l'elemento <source>, l'attributo src deve essere omesso nella definizione dell'elemento video o audio, altrimenti le alternative verranno ignorate:

<video poster="poster.jpg">
  <source src="video.3gp" type="video/3gpp" media="handheld">
  <source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
  <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

Per chi vuole avere più controllo sull'interfaccia in modo tale che essa possa adeguarsi al design della pagina, l'API fornisce diversi metodi ed eventi per far sì che gli script possano controllare il playback. I metodi più semplici da usare sono play(), pause(), usando currentTime si può riavvogere tutto dall'inizio. L'esempio che segue illustra quanto visto:

<video src="video.ogg" id="video"></video>

<script>
var video = document.getElementById("video");
</script>

<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;">&lt;&lt; Rewind</button>

Ci sono molti altri attributi e API disponibili per gli elementi audio e video che non vengono qui discussi. Per maggiori informazioni vi rimando alla bozza attuale della specifica.

audio

Ugualmente semplice incorporare un file audio nella pagina usando l'elemento <audio>. La maggior parte degli attributi sono comuni ai due elementi, sebbene, per ovvie ragioni, l'elemento audio manchi di attributi come width, height e poster:

<audio src="music.oga" controls>
  <a href="music.oga">Download song</a>
</audio>

Altre guide

Altre newsletter