Audio e video

Come hai appreso nel modulo Immagini, l'HTML consente di incorporare contenuti multimediali in una pagina web. In questa sezione esaminiamo i file audio e video, incluso come incorporarli, i controlli utente, la fornitura di un segnaposto immagine statica per i video e le best practice, tra cui la creazione di file audio e video accessibili.

<audio> e <video>

Gli elementi <video> e <audio> possono essere utilizzati per incorporare lettori multimediali direttamente con l'attributo src oppure come elemento contenitore per una serie di elementi <source>, ognuno dei quali fornisce un suggerimento per il file src. Sebbene <video> possa essere utilizzato per incorporare un file audio, l'elemento <audio> è preferibile per incorporare file audio.

I tag di apertura <video> e <audio> possono contenere diversi altri attributi, tra cui controls, autoplay, loop, mute, preload e gli attributi globali. L'elemento <video> supporta anche gli attributi height, width e poster.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Questo esempio di <video> ha una sola origine con l'attributo src che rimanda all'origine del video. L'attributo poster fornisce un'immagine da visualizzare durante il caricamento del video. Infine, l'attributo controls fornisce i controlli video per l'utente.

I contenuti di riserva sono inclusi tra i tag di apertura e chiusura. Se lo user agent non supporta <video> (o <audio>, vengono visualizzati questi contenuti. Il tag di chiusura </video> è obbligatorio, anche se non sono presenti contenuti tra i due (ma dovrebbero sempre essere presenti contenuti di riserva , giusto?).

Se non è incluso alcun attributo src nei tag di apertura <video> o <audio>, includi uno o più elementi <source>, ciascuno con un attributo src a un file multimediale. L'esempio seguente include tre opzioni per i file multimediali, contenuti di riserva e sottotitoli in inglese e francese tra i tag di apertura e chiusura.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Ogni elemento secondario <source> include un attributo src che punta alla risorsa e l'attributo type informa il browser del tipo di media del file collegato. In questo modo, il browser non recupera i file multimediali che non sarebbe in grado di decodificare.

All'interno dell'attributo type, puoi includere un parametro codecs che specifica esattamente come viene codificata la risorsa. I codec ti offrono un modo per includere le ottimizzazioni dei contenuti multimediali come miglioramenti progressivi (elementi non supportati da tutti i browser). Il codec è separato dal tipo di media da un punto e virgola. Ad esempio, il codec può essere scritto utilizzando una sintassi intuitiva, ad esempio <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> che indica che i file WebM contengono video VP8 e audio Vorbis.

I codec possono anche essere più difficili da decifrare, ad esempio <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> che indica che la codifica MP4 è Advanced Video Coding Main Profile Level 4.2. Spiegare questa sintassi va ben oltre l'ambito di questa lezione. Per maggiori dettagli, leggi il post di Jake Archibald su come determinare il parametro del codec per un video AV1.

Quando viene visualizzato un video, per impostazione predefinita, il primo frame del video viene mostrato come foto quando diventa disponibile. Si tratta di un aspetto che può essere controllato. L'attributo poster consente di visualizzare l'origine di un'immagine durante il download del video e fino alla riproduzione. Se il video viene riprodotto e successivamente messo in pausa, la locandina non viene visualizzata di nuovo.

Assicurati di definire le proporzioni del video, perché quando il video viene caricato, una differenza di dimensioni tra la locandina e il video causerà un reflow e un repaint.

Includi sempre l'attributo booleano controls. In questo modo i controlli utente sono visibili e gli utenti possono controllare i livelli audio, disattivare completamente l'audio ed espandere il video a schermo intero. L'omissione di controls crea un'esperienza utente negativa, soprattutto se è incluso l'attributo booleano autoplay. Tieni presente che alcuni browser non terranno conto della direttiva dell'attributo autoplay se l'attributo booleano muted viene omesso, perché la riproduzione automatica di un file multimediale è generalmente un'esperienza utente negativa, anche se l'audio è disattivato e i controlli sono visibili.

Tracce

Tra i tag di apertura e chiusura obbligatori di audio e video, includi uno o più elementi <track> per specificare le tracce di testo sincronizzato. L'esempio seguente include due file <track>, che forniscono sottotitoli codificati in inglese e francese.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

I file delle tracce, specificati nell'attributo src, devono essere in formato WebVTT (.vtt). I file devono trovarsi nello stesso dominio del documento HTML, a meno che non sia incluso l'attributo crossorigin.

Esistono cinque valori enumerati per l'attributo traccia kind: subtitles, captions, descriptions, chapters e altri metadata.

Includi subtitles insieme all'attributo srclang per la trascrizione e le traduzioni dei dialoghi. Il valore di ogni attributo label viene visualizzato come opzione per l'utente. Il contenuto dell'opzione VTT selezionata viene visualizzato sopra il video. L'aspetto dei sottotitoli codificati può essere modificato scegliendo come target ::cue/ ::cue().

Il valore kind="caption" deve essere riservato alle trascrizioni e alle traduzioni che includono effetti sonori e altre informazioni audio pertinenti. Non sono pensati solo per gli spettatori sordi. Magari un utente non riesce a trovare le cuffie e ha attivato i sottotitoli codificati. Oppure non hanno capito bene gli ultimi punti di discussione di un podcast preferito, quindi vogliono leggere la trascrizione per verificare di aver compreso bene. Avere modi alternativi per accedere ai contenuti audio e video è importante e conveniente.

La kind="description" è pensata per le descrizioni testuali dei contenuti visivi del video per gli utenti che non possono vedere il video, che utilizzino un sistema senza schermo come Google Home o Alexa o che siano ciechi.

Fornire sottotitoli codificati utilizzando il formato WebVTT rende il video accessibile alle persone con disabilità uditive. L'udito compromesso può essere dovuto al fatto che l'utente si trova in un ambiente rumoroso, ha altoparlanti difettosi o cuffie rotte oppure perché la persona ha una perdita dell'udito o si identifica come sorda. Assicurarsi che i contenuti siano accessibili aiuta molte più persone di quanto pensi, aiuta tutti.

Considerazioni sui video di sfondo

Il tuo team di marketing o di progettazione potrebbe voler includere un video di sfondo nel tuo sito. In genere, ciò significa che vogliono un video con riproduzione automatica, in loop e senza controlli. Il codice HTML potrebbe avere un aspetto simile al seguente:

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

I video in background non sono accessibili. I contenuti non devono essere trasmessi tramite video in background senza fornire agli utenti il controllo completo della riproduzione e l'accesso a tutti i sottotitoli codificati. Poiché questo video è puramente decorativo, include il ruolo ARIA di none e omette qualsiasi contenuto di riserva. Per migliorare il rendimento dei video sempre disattivati, rimuovi la traccia audio dalle origini media.

Se il tuo video dura cinque secondi o meno, le linee guida per l'accessibilità non richiedono un meccanismo di pausa, ma qualsiasi elemento con l'attributo booleano loop verrà riprodotto in loop per sempre per impostazione predefinita, superando questo limite di tempo di cinque secondi o qualsiasi altro limite di tempo. Per una buona esperienza utente, includi sempre un metodo per mettere in pausa il video. Il modo più semplice per farlo è includere controls.

Controlli multimediali personalizzati

Per visualizzare controlli video o audio personalizzati anziché i controlli integrati del browser, includi l'attributo controls. Poi utilizza JavaScript per aggiungere controlli multimediali personalizzati e rimuovere l'attributo controls. Ad esempio, puoi aggiungere un <button> che attiva/disattiva lo stato di riproduzione di un file audio.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

Questo esempio include un pulsante con attributi dataset contenenti il testo che si aggiorna quando il visitatore passa dallo stato di riproduzione a quello di pausa. L'attributo aria-controls è incluso in id dell'elemento controllato dal pulsante; in questo caso, l'audio. Ogni pulsante che controlla l'audio ha un gestore di eventi.

Per creare controlli personalizzati, utilizza HTMLMediaElement.play() e HTMLMediaElement.pause(). Quando attivi/disattivi lo stato di riproduzione, attiva/disattiva anche il testo del pulsante:

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

Se includi l'attributo controls, l'utente ha un modo per controllare l'audio (o il video) anche se JavaScript non funziona. Rimuovi l'attributo controls solo dopo aver creato un pulsante di sostituzione.

document.querySelector('[aria-controls]').removeAttribute('controls');

Includi sempre controlli esterni quando gli utenti non possono accedere ai controlli, ad esempio con i video in background i cui controlli sono nascosti dietro i contenuti del sito. È importante comprendere le nozioni di base sui requisiti di accessibilità dei contenuti multimediali per soddisfare le esigenze ambientali e sensoriali di utenti diversi, tra cui i milioni di persone con perdita dell'udito e disabilità visive. Abbiamo appena parlato di HTMLMediaElement, che fornisce diverse proprietà, metodi ed eventi ereditati sia da HTMLVideoElement che da HTMLAudioElement, con HTMLMediaElement che aggiunge alcune proprietà, metodi ed eventi propri. Esistono diverse altre API Media, tra cui un'API TextTrack. Puoi utilizzare le API Media Capture and Streams e MediaDevices per registrare l'audio dal microfono di un utente o registrare lo schermo di un utente. L'API Web Audio consente di manipolare audio live e preregistrato e di riprodurlo in streaming, salvarlo o inviarlo all'elemento <audio>.

Verifica la tua comprensione

Metti alla prova le tue conoscenze su audio e video.