Come hai imparato nel modulo Immagini, HTML consente di incorporare contenuti multimediali in una pagina web. In questa sezione esamineremo i file audio e video, incluse le istruzioni per incorporarli, i controlli utente, la fornitura di un segnaposto di immagine statica per i video e le best practice, tra cui rendere accessibili i file audio e video.
<audio> e <video>
Gli elementi <video> e <audio>
possono essere utilizzati per incorporare direttamente i media player con l'attributo src oppure come elemento contenitore per una serie di elementi <source>,
ciascuno fornisce un suggerimento per il file src. Sebbene <video> possa essere utilizzato per incorporare un file audio, l'elemento <audio> è preferibile per incorporare
i file audio.
I tag di apertura <video> e <audio> possono contenere molti 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 <video> ha una singola sorgente con l'attributo src che rimanda alla sorgente 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 vengono inclusi tra il tag di apertura e quello di chiusura. Se lo user agent non supporta <video> (o <audio>, vengono mostrati questi contenuti. Il tag di chiusura </video> è obbligatorio, anche se non sono presenti contenuti tra i due
(ma devono sempre essere presenti contenuti di riserva , giusto?).
Se non è incluso alcun attributo src nei tag <video> o <audio> di apertura, 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 di 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, mentre l'attributo type indica al browser
il tipo di media del file collegato. Questo impedisce al browser di recuperare i file multimediali che non sarebbe in grado di decodificare.
Nell'attributo type puoi includere un parametro codecs che specifica esattamente il modo in cui viene codificata la risorsa. I codec consentono di includere ottimizzazioni dei contenuti multimediali non ancora supportate in tutti i browser. Il codec è separato dal tipo di supporto da un punto e virgola. Ad esempio, il codec può essere scritto utilizzando una sintassi intuitiva, come <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
gli argomenti di questa lezione. Se vuoi saperne di più, Jake Archibald ha pubblicato un post che spiega come determinare il parametro del codec per un video AV1.
Per impostazione predefinita, durante la visualizzazione di un video, il primo fotogramma del video viene visualizzato come fermo immagine non appena disponibile.
Questo è un elemento che può essere controllato. L'attributo poster consente di visualizzare l'origine di un'immagine durante il download e la riproduzione del video. Se il video viene riprodotto e poi viene messo in pausa, il poster non viene mostrato di nuovo.
Assicurati di definire le proporzioni del video perché, quando il video si carica, una differenza di dimensioni tra il poster e il video causerà l'adattamento dinamico del contenuto e la ripetizione del disegno.
Includi sempre l'attributo controls boolean. In questo modo sono visibili i controlli dell'utente, offrendo agli utenti la possibilità di 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 rispettano l'istruzione dell'attributo autoplay se l'attributo booleano muted viene omesso perché la riproduzione automatica di un file multimediale rappresenta in genere un'esperienza utente negativa, anche se l'audio è disattivato e con controlli visibili.
Tracce
Tra i tag di apertura e di chiusura obbligatori dei tag audio e video, includi uno o più elementi <track> per specificare le tracce di testo temporizzate. Il seguente esempio include due file <track> che forniscono sottotitoli testuali 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 kind della traccia: 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. I contenuti dell'opzione VTT selezionata vengono visualizzati sopra il video. L'aspetto dei
sottotitoli può essere definito scegliendo come target ::cue/ ::cue().
Il valore kind="caption" deve essere riservato alla trascrizione e alle traduzioni che includono effetti sonori e altre informazioni audio pertinenti.
Non è solo per gli spettatori Sordi. Forse un utente non riesce a trovare le cuffie e ha attivato i sottotitoli codificati. O forse non hanno capito bene gli ultimi punti di discussione di un podcast preferito e vogliono leggerne la trascrizione per confermare di aver capito.
Avere metodi alternativi per accedere ai contenuti audio e video è sia importante sia pratico.
kind="description" è destinato a descrizioni testuali dei contenuti visivi nel video per gli utenti che non possono vedere il video, indipendentemente dal fatto che utilizzino un sistema senza uno schermo, come Google Home o Alexa, o non siano ciechi.
Fornire sottotitoli codificati utilizzando il formato WebVTT rende il video accessibile alle persone con disabilità uditiva. Ricorda, la disabilità è una mancata corrispondenza tra una persona e l'ambiente attuale. I problemi di udito possono essere causati dall'utente che si trova in un ambiente rumoroso, che ha altoparlanti difettosi o cuffie rotte o che l'utente ha qualche perdita dell'udito o è sordo. Garantire che i tuoi contenuti siano accessibili aiuta molte più persone di quanto pensi e aiuta tutti.
Considerazioni sui video di base
Il team di marketing o di progettazione potrebbe decidere di includere un video di sfondo sul sito. In genere, vogliono un video con audio disattivato, a riproduzione automatica e loop, senza controlli. Il codice HTML potrebbe avere un aspetto simile al seguente:
<video 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 di sottofondo senza fornire agli utenti il controllo completo sulla riproduzione e sull'accesso a tutti i sottotitoli. Poiché questo video è puramente decorativo, include il ruolo ARIA
di none e omette eventuali contenuti di riserva.
Per migliorare il rendimento dei video con audio sempre disattivato, rimuovi la traccia audio dalle tue fonti multimediali.
Se il video viene riprodotto per cinque secondi o meno, le linee guida sull'accessibilità non richiedono un meccanismo di messa in pausa, ma tutto ciò
con l'attributo booleano loop verrà riprodotto in loop per impostazione predefinita, superando questo limite di tempo di cinque secondi o qualsiasi altro limite. Per una buona
esperienza utente, includi sempre un metodo per mettere in pausa il video. Per farlo, è più facile includere controls.
Controlli multimediali personalizzati
Per visualizzare controlli video o audio personalizzati, anziché i controlli integrati nel browser, includi l'attributo controls. Poi utilizza JavaScript per aggiungere controlli multimediali personalizzati e rimuovere l'attributo dei controlli. Ad esempio, puoi aggiungere un elemento <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 verrà aggiornato quando il visitatore passa dallo stato di riproduzione a quello di pausa e viceversa. L'attributo aria-controls è incluso nel valore 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 la modalità di riproduzione,
attiva 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;
}
}
Includendo l'attributo controls, l'utente può controllare l'audio (o il video) anche se JavaScript non funziona.
Rimuovi l'attributo dei controlli solo dopo aver creato l'istanza di un pulsante di sostituzione.
document.querySelector('[aria-controls]').removeAttribute('controls');
Includi sempre i controlli esterni quando gli utenti non possono accedervi, ad esempio con video in background i cui controlli sono nascosti dietro i contenuti del sito. È importante comprendere le nozioni di base dei requisiti di accessibilità dei contenuti multimediali per soddisfare gli utenti con esigenze ambientali e sensoriali diverse, inclusi i milioni di persone con perdita dell'udito e disabilità visive.
Abbiamo appena accennato alla HTMLMediaElement, che offre diversi metodi, proprietà ed eventi ereditati da HTMLVideoElement e HTMLAudioElement, con HTMLMediaElement che aggiunge alcuni metodi, proprietà ed eventi propri. Esistono molte 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 modificare l'audio e lo streaming in diretta e preregistrati, nonché di salvare o inviare l'audio all'elemento <audio>.
Verifica la tua comprensione
Verifica le tue conoscenze in materia di audio e video.
A cosa serve l'elemento <track>?
Che cosa controlla l'attributo poster?