Webdesign / 10: html 5

Audio

L'audio su web può essere riprodotto tramite plugin proprietari (tipicamente adobe flash), oppure utilizzando il tag html5 <audio> (es. <audio src="http://www.softml.it/polite.mp3">). Tramite l'attributo controls si può richiedere al browser di mostrare i comandi di avvio, interruzione e volume dell'audio; ogni browser farà il render del controllore di audio alla sua maniera.

Allo stato attuale è guerra tra il formato mp3 (diffuso ma proprietario) e ogg (aperto ma meno diffuso).

tramite il tag source innestato nel tag audio è possibile specificare più formati audio:

<audio>
<source src="http://www.softml.it/polite.mp3" type="audio/mpeg"/>
<source src="http://www.softml.it/polite.ogg" type="audio/ogg"/>
</audio>

Includendo anche il riferimento al player di flash (tag object) è garantita la retro compatibilità.

Insomma, si voleva fare uno standard e ci si ritrova ancora a dover specificare tre diverse versioni per la stessa funzionalità.

Bisogna fare sempre attenzione all'accessibilità: aggiungere anche un tag p con il contenuto dell'audio è utile soprattutto a chi ha problemi nell'ascolto.

Video

Rispetto al tag audio, con il tag video cambia poco: bisogna specificare le dimensioni e un'eventuale immagine "screenshot" rappresentativa del video, poi ci sono gli stessi problemi di compatibilità di formati che affliggono l'audio.

Canvas

Il tag canvas permette di disegnare immagini vettoriali, includendo anche immagini di tipo raster. Il tag permette di specificare i soli attributi width e height, mentre il disegno è descritto da una serie di comandi ECMA-script: questo significa che il canvas non ha un DOM e che quindi non è possibile interagire con il contenuto dell'immagine né sapere a priori se ci sia del testo all'interno.

Richiesto all’esame

  • HTML 5 prevede audio e video
  • I browser non interpretano i formati allo stesso modo
  • Occorre specificare più formati, anche open source (ma non solo)