HTML & CSS per principianti (Parte 23): Multimedia per il sito web (2)

È possibile incorporare file audio in HTML5 in modo simile ai video. HTML5 mette a disposizione un proprio elemento audio per questo.

<audio src="song.mp3">
   Il tuo browser non supporta l'elemento audio.
</audio>

All'elemento audio viene assegnato il nome del file da riprodurre attraverso l'attributo src. Tuttavia, il file non viene riprodotto in questo modo. Sono necessari controlli per la riproduzione.

Per visualizzare i controlli, assegnate all'elemento audio l'attributo controls.

<audio src="song.mp3" controls>
   Il tuo browser non supporta l'elemento audio.
</audio>

Nel browser la visualizzazione sarà simile a questa:

Se manca controls, l'elemento audio incorporato con audio non sarà visibile. È utile omettere l'attributo se si desidera aggiungere controlli personalizzati tramite JavaScript.

Purtroppo, l'utilizzo dell'elemento audio non è sempre senza problemi. La colpa, ancora una volta, è dei browser che supportano formati diversi ciascuno. La seguente tabella fornisce lo stato attuale a riguardo.

Cosa fare dunque? Anche l'elemento audio offre la possibilità di definire elementi source aggiuntivi. A questi elementi si assegnano i diversi formati per i vari browser. Esempio:

<audio controls>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Agli attributi src vengono assegnati i file corrispondenti nei diversi formati. Oltre a controls, ci sono altri attributi per l'elemento audio. Uno di questi è autoplay.

<audio controls autoplay>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Se l'attributo è impostato, la riproduzione del file audio inizia automaticamente una volta caricato. Di solito questo attributo non viene impostato, poiché si dovrebbe lasciare ai visitatori la decisione su quando riprodurre un file audio.

Interessante è anche l'attributo loop. Questo attributo fa sì che il file venga riprodotto in loop.

Come per i video, per i file audio ci sono anche gli attributi type e media. Qui è possibile specificare i rispettivi tipi MIME e codec. Nella specifica di HTML5 sono elencate le seguenti tipiche specifiche per l'attributo type:

• type='audio/ogg; codecs=vorbis'

• type='audio/ogg; codecs=speex'

• type='audio/ogg; codecs=flac'

Nota che i due attributi possono essere utilizzati solo con l'elemento source, non con l'elemento audio.

Integrare Flash & Co.

I filmati in Flash potevano essere inclusi nelle versioni più vecchie di HTML attraverso una combinazione di embed e object. La sintassi risultante - molto brutta per inciso - sembrava ad esempio così:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600">
  <param name=movie value="intro.swf">
 <param name=quality value=high>
 <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed>
 </object>

Questo è il classico modo tramite gli elementi object e embed, che esiste da molto tempo in HTML.





Tuttavia, "classico" qui non significa che questa variante sia stata approvata in passato dal W3C. Infatti, in HTML 4 è stato favorito l'elemento object, che veniva interpretato correttamente anche dall'Internet Explorer. Diversamente, il Netscape Navigator utilizzava l'elemento embed. Questa diversa interpretazione rese necessaria la combinazione di object e embed.

HTML5 mette a disposizione ufficialmente i due elementi object e embed per l'inclusione di contenuti attivi.

embed è un contenitore pensato per la visualizzazione di contenuti non HTML non coperti da altri elementi come img, video, audio ecc. Solitamente, per riprodurre i contenuti inclusi, sono necessari i plug-in del browser.

Con embed è ora possibile incorporare in modo conforme ai criteri standard ad esempio filmati Flash. Ecco un esempio di come potrebbe apparire:

<embed
    src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
    type="application/x-shockwave-flash"
    width="384"
    height="313"
    allowscriptaccess="always"
    allowfullscreen="true"
  />

All'elemento embed possono essere assegnati vari attributi. Il più importante è naturalmente l'attributo src. Infatti, è tramite questo che si specifica il file da includere. Il tipo MIME è indicato dall'attributo type. Nel caso di Flash, questo è application/x-shockwave-flash. Se si desidera invece includere un file LaTeX, si specifica application/x-latex. Larghezza e altezza del file incluso sono regolate dagli attributi width e height.

Vanno segnalati anche altri attributi, che però non fanno ufficialmente parte di HTML5. Consentono però di controllare il plug-in utilizzato. Così, nell'esempio precedente gli attributi "Flash" allowscriptaccess e allowfullscreen indicavano che l'accesso agli script e la modalità a schermo intero sono possibili. Esiste anche l'attributo quality, che permette di determinare la qualità del filmato Flash.

<embed 
    src="flash.swf" 
    width="600" height="300" 
    type="application/x-shockwave-flash" 
    quality="high" 
 />

L'elemento object

L'elemento object funge simile a embed come contenitore per i contenuti. A differenza di embed, tuttavia, object conosce tre diversi modelli di contenuto. Se il browser riconosce che si tratta di un'immagine direttamente visualizzabile, si comporta come se fosse un elemento img. Se l'oggetto referenziato è un contenuto web, questo viene visualizzato all'interno di un iFrame. (Più informazioni sugli iFrames verranno fornite in seguito in questa serie). Per altri contenuti, object si comporta come embed.

L'esempio seguente mostra l'inclusione di un filmato Flash tramite l'elemento object.

<object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
    width="400"
    height="300">
    <param name="allowscriptaccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <p>
       Il tuo browser non dispone di un plug-in Flash.
    </p>
 </object>

Ovviamente sorge la domanda finale se sia meglio utilizzare object o embed. A prima vista, sembrano elementi quasi identici. E infatti l'elemento object può fare tutto ciò che può fare l'elemento embed.





Per l'inclusione di contenuti - tranne le immagini - si dovrebbe normalmente ricorrere all'elemento object. Questo perché consente di specificare contenuti alternativi che verranno visualizzati nel caso in cui l'elemento incluso non possa essere caricato.