Audio e video

Aggiungere un file audio

L’elemento <audio> permette al browser di riprodurre un suono. L’attributo controls mostra i comandi per avviare, mettere in pausa e regolare il volume.

<audio controls>
  <source src="media/intervista.mp3" type="audio/mpeg" />
  Il tuo browser non può riprodurre questo audio.
</audio>

source indica il file e, con type, il suo formato. Il testo dentro audio è un contenuto di ripiego (fallback): viene usato dai browser che non supportano l’elemento.

Puoi offrire più formati. Il browser usa il primo che riconosce:

<audio controls>
  <source src="media/intervista.ogg" type="audio/ogg" />
  <source src="media/intervista.mp3" type="audio/mpeg" />
  Il tuo browser non può riprodurre questo audio.
</audio>

Aggiungere un video

Il funzionamento di <video> è simile. Anche qui controls lascia alla persona i comandi di riproduzione:

<video controls width="640" height="360">
  <source src="media/laboratorio.mp4" type="video/mp4" />
  Il tuo browser non può riprodurre questo video.
</video>

Puoi aggiungere poster per mostrare un’immagine prima della riproduzione:

<video controls poster="immagini/anteprima-laboratorio.jpg">
  <source src="media/laboratorio.mp4" type="video/mp4" />
</video>

Sottotitoli

I sottotitoli rendono il video comprensibile a chi non sente l’audio, si trova in un ambiente rumoroso o non conosce bene la lingua parlata.

<video controls>
  <source src="media/laboratorio.mp4" type="video/mp4" />
  <track src="media/sottotitoli-it.vtt" kind="captions" srclang="it" label="Italiano" default />
</video>

Il file .vtt contiene il testo e i tempi in cui deve apparire. kind="captions" indica che la traccia comprende dialoghi e suoni importanti; srclang="it" dichiara la lingua italiana e default la seleziona inizialmente.

Per un audio senza immagini, fornisci anche una trascrizione testuale nella pagina. I sottotitoli seguono il tempo del video; una trascrizione raccoglie invece il contenuto in un testo che si può leggere e cercare.

Lasciare il controllo alla persona

Evita la riproduzione automatica con suono. Può disturbare, consumare dati e creare problemi a chi usa tecnologie assistive.

controls è quindi una scelta importante: lascia alla persona il controllo della riproduzione. Ricorda anche che audio e video possono essere file pesanti; comprimili e offri soltanto la qualità necessaria.