Audio e video HTML5 con Modernizr

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>

Come per il supporto dei formati audio, anche per quelli video la libreria si occupa di testare se un determinato formato è supportato dal browser. Anche in questo caso il funzionamento è del tutto identico all'esempio precedente. Al momento i due formati video supportati sono: ogg e h264.

Un esempio

Dopo aver visto alcuni semplici esempi di codice, vediamo insieme un esempio un po' più elaborato per l'integrazione di un player video all'interno di una pagina web: vediamo insieme come realizzarlo.

L'obiettivo di questo esempio è quello di garantire la visualizzazione del video in tutti i browser che supportano l'HTML5 cercando di ridurre al minimo l'utilizzo di player esterni. Per effettuare ciò sfrutteremo gli strumenti messi a disposizione da ognuno dei browser.

Innanzitutto procuriamoci un file video e convertiamolo nei formati ogg, mp4 e flv. Dovremo lavorare un po' di più per garantire la visualizzazione anche nel caso non ci siano i codec o ci sia qualche problema nella riproduzione ma andiamo per gradi.

Creiamo la nostra pagina HTML5 e includiamo la libreria Modernizr. Utilizziamo anche il codice CSS visto negli esempi precedenti per visualizzare il contenitore in base al supporto video. Il codice completo realizzato finora quindi è il seguente:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Modernizr - Sample Video</title>
  <script type="text/javascript" src="modernizr-1.0.min.js"></script>
  <style type="text/css">
    body { background: #f7f7f7; color: black; text-align: center; }
    .video #no-video,
    .no-video #video { display: none; }
  </style>
</head>
<body>
  <!-- se il browser supporta il tag video -->
  <div id="video">
  </div>
  <!-- se il browser non supporta il tag video -->
  <div id="no-video">
  </div>
</body>
</html>

Come spiegato in precedenza abbiamo due div, uno che conterrà il codice per i browser che supportano il tag <video> (#video), e l'altro per gli altri browser (#no-video).

Inseriamo ora il codice HTML all'interno del div #video:

<div id="video">
  <video width="640" height="360" poster="poster.jpg" controls="controls">
  	<source src="http://tinyvid.tv/vfe/big_buck_bunny.ogv" type="video/ogg" />
  	<source src="http://tinyvid.tv/vfe/big_buck_bunny.mp4" type="video/mp4" />
  </video>
</div>

Con il codice precedente garantiamo a Firefox e Chrome la perfetta visualizzazione del video. Andiamo ora a lavorare per gli altri browser.

Per visualizzare correttamente il video anche in caso di codec non installati abbiamo bisogno di un player esterno. Per l'occasione abbiamo scelto FlowPlayer ma potete sceglierne uno qualsiasi. Per il codice all'interno del div #no-video andiamo ad utilizzare un trucchetto ideato da Kroc Camen.

Innanzitutto andiamo a creare un elemento object per la riproduzione del video mp4 compatibile con i computer che hanno il codec installato:

<!-- se il browser supporta gli mp4 -->
<object width="640" height="375" type="video/quicktime" data="video.mp4">
  <param name="src" value="video.mp4" />
  <param name="autoplay" value="true" />
  <param name="showlogo" value="false" />
</object>

Ora, prima del tag di chiusura dell'object, inseriamo il codice necessario al caricamento del player. Questo piccolo trucchetto consente il caricamento del player nel caso ci fossero problemi con l'utilizzo del codec mp4. Il codice in questo caso sarà il seguente (ovviamente cambierà in base al player scelto):

<!-- altrimenti carico un player esterno  -->
<script type="text/javascript" src="flowplayer-3.1.4.min.js"></script>
<a
    href="video.flv"
    style="display:block;width:640px;height:375px"
    id="player">
</a>
<script type="text/javascript"> flowplayer("player", "flowplayer-3.1.5.swf"); </script>

Il codice completo dell'esempio è disponibile per il download.

Conclusioni

Dall'articolo, e soprattutto dall'ultimo esempio, abbiamo potuto vedere che integrare contenuti multimediali all'interno di una pagina web diventa giorno dopo giorno sempre più semplice e meno laborioso. Nella speranza che la perfetta integrazione dell'HTML5 nei moderni browser diventi una realtà quanto prima, non ci resta che affidarci a strumenti come Modernizr per incominciare a sfruttare a pieno le potenzialità che questo linguaggio di markup ci offre.