HTML/XHTML  »  Articoli  »  HTML5 

Qualche tempo fa abbiamo presentato la libreria Javascript Modernizr occupandoci di come implementare i CSS3 attraverso di essa.

In questo articolo vedremo come utilizzare la libreria per includere contenuti multimediali all'interno di una pagina web sfruttando le nuove proprietà dell'HTML5.

HTML 5 e Modernizr

Modernizr gestisce solo le nuove caratteristiche per la gestione di contenuti multimediali dell'HTML5 ma ci aiuta anche con altre proprietà dell'erede di HTML4.

Le feature HTML5 che la libreria individua sono:

• Canvas
• Canvas Text
• HTML5 Audio
• HTML5 Video
• Geolocation API
• Input Types
• Input Attributes
• localStorage
• sessionStorage
• Web Workers
• applicationCache

Prima di entrare nel dettaglio dell'articolo, però, ricordiamo lo pseudo-codice su cui è basata Modernizr e che sarà la base per la progettazione degli esempi.

if (il browser supporta questa proprietà) {
  //usa questa proprietà
} else {
  //non usare questa proprietà ma una alternativa
}

HTML5 Audio

Una caratteristica molto ineteressante di HTML5 è la possibilità di integrare contenuti audio e video all'interno della pagina senza aver bisogno di player di terze parti ma semplicemente utilizzando gli strumenti messi a disposizione dal browser.

Vediamo intanto come integrare all'interno di una pagina web un piccolo player audio in base al browser. Nel caso in cui il browser supporti il tag <audio> utilizziamo il player integrato, in caso contrario carichiamo un piccolo player Flash.

Stavolta non abbiamo bisogno di codice Javascript per l'integrazione del player, ci basta una semplice riga di CSS.

Il codice HTML è il seguente:

<!-- Player integrato -->
<div id="audio">
    <audio src="audio.mp3" controls="controls"></audio>
</div>
<!-- Player flash -->
<div id="no-audio">
  <object type="application/x-shockwave-flash" data="player.swf" width="320" height="50">
    <param name="movie" value="audio.mp3"/>
  </object>
</div>

Sfruttando le proprietà di Modernizr, quindi, ci basterà nascondere uno dei contenitori a seconda del supporto, come nel seguente codice:

.audio #no-audio,
.no-audio #audio { display: none; }

Il supporto audio di Modernizr non finisce qui però. La libreria consente infatti di testare se il browser supporta un determinato formato audio e di regolarsi di conseguenza. I formati supportati al momento sono: ogg, mp3, wav e m4a. Questa caratteristica ci aiuta nella realizzazione di codice cross-browser ed evita spiacevoli sorprese nel caso in cui un determinato formato non sia supportato dal browser. Per effettuare il test dei formati abbiamo bisogno dell'ausilio del Javascript:

Un semplice esempio di testing del supporto dei formati audio è il seguente:

if( Modernizr.audio ) {
  if( Modernizr.audio.ogg )
    //supporto formato ogg
  else if(  Modernizr.audio.mp3 )
    //supporto formato mp3
}

HTML5 Video

Dopo aver parlato di supporto audio, occupiamoci ora di supporto video.

Il supporto video avviene testando la proprietà canPlayType dell'elemento video.

Il funzionamento è completamente identico a quello presentato nell'esempio precedente con l'unica differenza del codice HTML per il video. Basta quindi sostituire il tag audio con il seguente codice:

<video src="movie.ogg" controls="controls"></video>

Altri articoli

Altre guide

Altre newsletter