Multimedialità audio e video con HTML5

Cristian Civera

di , in HTML5,


Questo articolo è tratto dal capitolo 5 ("Audio e video in HTML5") del libro HTML5 Espresso, di Daniele Bochicchio, Cristian Civera, Matteo Casati, Riccardo Golia, Stefano Mostarda (Hoepli, 2011)

Acquista subito la tua copia ad un prezzo vantaggioso!

Grazie alla sempre più ampia diffusione di internet e alla disponibilità di banda, consumare contenuti multimediali è, ormai, all'ordine del giorno. Oggi, questa operazione è possibile solo attraverso plug-in, come Adobe Flash o Microsoft Silverlight, che sono in grado di decodificare, anche con accelerazione hardware, i più diffusi formati audio e video disponibili.

HTML5 viene incontro, quindi, a questa necessità, introducendo due nuovi tag, di nome audio e video, che sebbene siano ancora in corso di definizione per quanto concerne alcuni aspetti, possono essere usati per sviluppare già un player multimediale, che possa sostituirsi quasi in tutto all'uso dei plug-in.

I tag audio e video

Come abbiamo anticipato, in HTML5 abbiamo a disposizione due nuovi tag molto simili nell'utilizzo, ma che differiscono per il fatto che uno, il tag audio, ha il compito di riprodurre un contenuto audio, mentre l'altro, il tag video, ha il compito di riprodurre video.

Contrariamente a quanto possiamo pensare, anche il tag audio produce un'interfaccia, perché entrambi i tag possono avere la barra di controllo, per agire sul contenuto in ascolto o in visualizzazione. Questi tag vanno, quindi, inseriti all'interno della pagina, nel punto in cui lo riteniamo opportuno, e rientrano nel DOM della stessa, interagendo e influenzando gli altri elementi presenti.

Nell'esempio 5.1 possiamo vedere come usare i due tag per inserire due contenuti audio e video all'interno della nostra pagina.

Esempio 5.1
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5: audio e video</title>
  </head>
  <body>
    <h1>Audio</h1>
    <audio src="test.mp3" controls />

    <h1>Video</h1>
    <video src="test.mp4" controls>
      Il tuo browser non supporta i video
    </video>
  </body>
</html>

L'attributo src ci permette di indicare con un URI (nell'esempio una risorsa locale) il riferimento al contenuto multimediale da riprodurre. L'attributo controls indica di visualizzare i controlli standard offerti dal browser per la classica gestione di play, pause, seek e volume, di cui ogni contenuto multimediale normalmente necessita. Da notare, infine, che all'interno del tag possiamo indicare il markup da visualizzare nel caso il browser non dovesse supportare HTML5. Nella figura 5.1 possiamo vedere il rendering standard offerto da Internet Explorer 9, utilizzato in questo caso perché supporta i file MP4.

Figura 5.1 - Tag audio e video con i controlli predefiniti di IE9.

Tag audio e video con i controlli predefiniti di IE9

Per il tag audio la mancata indicazione dell'attributo controls comporta l’avvio della traccia audio, mentre per il tag video la riproduzione non risulta controllabile, se non sfruttando il menu contestuale del browser. La barra di controllo è, comunque, visibile solo passando con il mouse sul video visualizzato.

Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

Multimedialità audio e video con HTML5 1010 8
| Condividi su: Twitter, Facebook, LinkedIn, Google+

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I tutorial
Top Ten Articoli
Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

Iscrivi subito! »»»

In primo piano

I più letti di oggi

Media
In evidenza
MISC