Audio e Video in HTML5

In precedenza, le tecnologie web native come HTML non consentivano di incorporare video e audio sul Web. Le tecnologie basate su plugin divennero popolari per gestire tali contenuti, ma presentavano numerosi problemi, tra cui una scarsa compatibilità con le funzionalità di HTML/CSS, problemi di sicurezza e di accessibilità. In seguito, la specifica HTML5 ha introdotto queste funzionalità con gli elementi <video> e <audio>.

L'elemento <audio> viene utilizzato per incorporare file audio in una pagina web, mentre l'elemento <video> viene utilizzato per incorporare un video.

Come Aggiungere Audio a una Pagina Web

Prima di HTML5, l'audio veniva aggiunto alla pagina come suono di sottofondo tramite il tag non standard <bgsound>. Il file veniva riprodotto mentre la pagina era visualizzata e l'utente non poteva disattivare il suono. In HTML5, possiamo incorporare file audio usando il tag <audio>, senza la necessità di collegare plugin di terze parti. L'elemento audio può essere controllato con HTML o Javascript e stilizzato con CSS.

Nel codice, l'attributo src fa riferimento all'URL del file audio e l'attributo controls aggiunge un pannello di controllo (pulsante play, barra di avanzamento, controllo del volume).

Audio e Video in HTML5

<audio src="name.ogg" controls></audio>

Attenzione

Includi sempre l'attributo controls a meno che tu non fornisca i tuoi controlli accessibili in JavaScript. Senza di esso, gli utenti che usano tastiera o screen reader non hanno modo di riprodurre, mettere in pausa o regolare il volume del contenuto multimediale.

Codec Audio e Formati di File Audio

Poiché non tutti i browser supportano tutti i formati audio, il file audio viene codificato/decodificato con un codec audio (un dispositivo elettronico digitale o un'applicazione software basata su computer che facilita la compressione e la decompressione di dati audio digitali). Tutti i formati di file audio vengono aggiunti contemporaneamente tramite l'elemento <source> con l'attributo src.

Quando si definiscono diversi formati di file, si raccomanda di definire un tipo MIME per ciascun file in modo che il browser possa scegliere il formato che supporta. Il tipo MIME viene impostato con l'attributo type. Il browser utilizza il primo <source> che riesce a riprodurre, quindi ordinali dal formato più preferito o più ampiamente supportato a quello meno supportato.

Esempio di aggiunta di diversi formati di file audio:

Esempio di Codec Audio e Formati di File Audio

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <audio controls>
     <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
     <source src="/build/audios/audio.mp3" type="audio/mpeg" />
   </audio>
   <p>Click the play button</p>
 </body>
</html>

Provalo tu stesso »

I formati audio più popolari sono i seguenti:

MP3 — il formato audio più diffuso, che utilizza la compressione con perdita per ridurre le dimensioni del file. È supportato da praticamente tutti i browser, quindi rappresenta un <source> predefinito sicuro.

AAC (Advanced Audio Codec) — un'alternativa all'MP3 che offre qualità superiore con la stessa compressione o maggiore. È ampiamente supportato dai browser moderni (servito come audio/mp4 o audio/aac).

Ogg Vorbis — un formato libero e open source supportato in Firefox e Chrome, ma non in Safari. Offre una buona qualità audio ma è meno comunemente utilizzato dai lettori multimediali dei dispositivi.

Supporto di codec e browser, in breve: MP3 e AAC sono supportati quasi ovunque, incluso Safari, quindi elenca uno di essi come <source> di fallback. Ogg Vorbis e WebM (Opus) sono royalty-free e vengono riprodotti in Firefox e Chrome ma non in Safari. Un ordinamento comune e sicuro prevede il formato aperto per primo e MP3/AAC per ultimo, in modo che ogni browser trovi qualcosa che possa riprodurre.

Come Aggiungere File Video

Nelle versioni precedenti di HTML, i video venivano incorporati nel sito tramite plugin di terze parti, come QuickTime, RealPlayer o Flash. HTML5 dispone di un nuovo tag <video>, utilizzato per inserire un video nella pagina web.

Nel codice, si presenta così:

Audio e Video in HTML5

<video src="example.webm" controls></video>

L'attributo src indica l'URL del file, mentre l'attributo controls visualizza i controlli di riproduzione.

Autoplay, l'attributo muted e l'accessibilità

È possibile chiedere al browser di iniziare la riproduzione non appena il contenuto multimediale è pronto tramite l'attributo autoplay. Tuttavia, i browser moderni bloccano l'autoplay con audio per evitare di sorprendere l'utente. Di conseguenza, autoplay funziona in modo affidabile solo quando il contenuto multimediale è anche muted:

<video autoplay muted controls src="example.webm"></video>

Utilizza l'autoplay con parsimonia. I contenuti multimediali che partono da soli, specialmente con audio, possono disorientare gli utenti con screen reader e le persone con sensibilità cognitive o vestibolari. Le linee guida WCAG richiedono che qualsiasi audio riprodotto per più di tre secondi abbia un modo per metterlo in pausa o fermarlo, quindi mantieni controls presente ogni volta che utilizzi autoplay.

L'attributo poster

Per <video>, l'attributo poster imposta un'immagine segnaposto mostrata prima che il video venga riprodotto (o mentre si carica). Fornisce agli utenti un'anteprima significativa invece di un fotogramma vuoto:

<video controls poster="/build/images/preview.jpg" src="example.webm"></video>

L'attributo preload

L'attributo preload suggerisce al browser quanto deve bufferizzare prima che l'utente prema play:

none — non bufferizzare nulla fino a quando l'utente non avvia la riproduzione.
metadata — carica solo i metadati (durata, dimensioni, primo fotogramma).
auto — il browser può scaricare l'intero file in anticipo.

preload è solo un suggerimento e i browser possono ignorarlo. Su dispositivi mobili o pagine con consumo dati ridotto, preferisci metadata o none per evitare di scaricare file di grandi dimensioni che il visitatore potrebbe non guardare mai.

Codec Video e Formati di File Video

Ogni browser supporta un determinato insieme di codec, quindi per riprodurre video ovunque è necessario fornire il file in alcuni formati. Come per l'audio, ogni formato è elencato nel proprio elemento <source>, partendo da quello più preferito. Ogni file video deve avere un tipo MIME, impostato con l'attributo type.

Per assicurarsi che il server consegni i file video al browser correttamente, potrebbe essere necessario dichiarare i loro tipi MIME nella configurazione del server (vedi sotto).

Esempio di aggiunta di diversi formati di file video:

Esempio di Codec Video e Formati di File Video

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Provalo tu stesso »

Oggi esistono 3 formati video di base: MP4/MPEG-4, OGG e WebM. Per la compressione dei dati video e la loro riproduzione si utilizzano i codec.

Per un file video in formato MPEG-4 si utilizzano il codec video H.264 e il codec audio AAC. Per utilizzare questi codec è necessario ottenere una licenza.

Per il file video Ogg, si utilizzano il codec video Theora open source e il codec audio Vorbis.

Per i file video WebM, si utilizzano il codec video VP8 (o VP9) e il codec audio Vorbis (o Opus). In questo caso non è richiesta alcuna licenza.

Configurare i tipi MIME corretti nel server

Il server comunica al browser il tipo di file che sta inviando tramite l'intestazione di risposta Content-Type (il tipo MIME). Se un server invia un file multimediale con un tipo MIME errato o mancante, il browser potrebbe rifiutarsi di riprodurlo anche quando supporta il codec. Molti server non sono configurati per servire file Ogg, WebM o MP4 di default, quindi potrebbe essere necessario aggiungere il mapping manualmente.

Su Apache, aggiungi il seguente contenuto a un file .htaccess nella cartella del tuo sito:

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

Su Nginx, aggiungi le voci corrispondenti al blocco types { ... } (solitamente in mime.types):

types {
    audio/ogg  oga;
    audio/wav  wav;
    video/ogg  ogv ogg;
    video/mp4  mp4;
    video/webm webm;
}

Come Aggiungere Sottotitoli e Didascalie

Le tracce di testo come sottotitoli e didascalie vengono aggiunte ai file audio e video tramite l'elemento <track>, che viene inserito come elemento figlio di <audio> o <video>. Ogni traccia punta a un file WebVTT (.vtt).

Fornire didascalie per i contenuti multimediali preregistrati è un requisito di accessibilità: un <track kind="captions"> soddisfa il Criterio di Successo WCAG 2.1 1.2.2, su cui gli utenti sordi e con problemi di udito fanno affidamento per comprendere l'audio.

L'attributo kind indica al browser il tipo di traccia di testo:

subtitles — traduzioni o trascrizioni dei dialoghi per gli spettatori che possono sentire ma non capiscono la lingua. Questo è il valore predefinito.
captions — come i sottotitoli, ma descrivono anche gli effetti sonori e altri segnali audio per gli spettatori che non possono sentire.
descriptions — una descrizione testuale del contenuto video, destinata a essere letta ad alta voce per gli utenti che non possono vedere lo schermo.
chapters — titoli di capitoli utilizzati per navigare nel contenuto multimediale.
metadata — tracce utilizzate dagli script e non visualizzate all'utente.

Esempio di aggiunta di didascalie a un file video:

Didascalie per un file video con l'elemento track

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="captions" label="English" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt" />
    </video>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Provalo tu stesso »

Suggerimento

Per allineare il lettore video nella pagina, inserisci l'elemento <video> nel contenitore <div>, assegnagli una classe e definisci larghezza e altezza corrispondenti alle dimensioni del tuo video.

Attributi di Audio e Video

Attributo	Descrizione
autoplay	Permette all'audio/video di avviarsi automaticamente durante il caricamento del resto della pagina.
controls	Permette di controllare la riproduzione dell'audio/video, inclusi volume e pausa/ripresa della riproduzione.
loop	Permette all'audio/video di riprodursi di nuovo ogni volta che termina.
muted	Riproduce il contenuto multimediale con il suono disattivato per impostazione predefinita.
preload	Specifica il bufferizzazione di file di grandi dimensioni. Può avere uno di questi valori: "none" (non bufferizza il file), "auto" (bufferizza il file multimediale) o "metadata" (bufferizza solo i metadati del file).
src	L'URL dell'audio/video da incorporare. È opzionale.
poster	È l'URL di un'immagine visualizzata prima che il video venga riprodotto.
width	Specifica la larghezza dell'area di visualizzazione del video, in pixel CSS.
height	Specifica l'altezza dell'area di visualizzazione del video, in pixel CSS.

Esercitazione

Pratica

Quali due elementi HTML5 incorporano contenuti multimediali direttamente, senza plugin?

L'elemento audio e l'elemento videoL'elemento embed e l'elemento fileL'elemento multimedia e l'elemento soundL'elemento mp3 e l'elemento mp4

Pratica

Perché l'autoplay funzioni in modo affidabile nei browser moderni, il contenuto multimediale deve anche essere:

Disattivato (muted), perché i browser bloccano l'autoplay con audioImpostato con l'attributo loopDotato di un'immagine posterPrecaricato con preload impostato su auto

Pratica

Quale valore dell'attributo kind soddisfa il criterio WCAG 1.2.2 descrivendo dialoghi ed effetti sonori per gli utenti sordi?

kind impostato su captionskind impostato su chapterskind impostato su metadatakind impostato su descriptions