Pubblicato il 20 agosto 2020
I sottotitoli codificati e le descrizioni degli screen reader sono gli unici modi in cui molti utenti possono visualizzare i tuoi video e, in alcune giurisdizioni, sono persino richiesti dalla legge o dai regolamenti. Il formato WebVTT (Web Video Text Tracks) viene utilizzato per descrivere i dati di testo sincronizzati, ad esempio sottotitoli codificati o sottotitoli, per rendere i video più accessibili.
Aggiungi <track>
tag
Per aggiungere sottotitoli codificati o descrizioni dello screen reader a un video web, aggiungi un tag <track>
all'interno di un tag <video>
. Oltre ai sottotitoli codificati e alle descrizioni per gli screen reader, i tag <track>
possono essere utilizzati anche per i sottotitoli e i titoli dei capitoli.
Il tag <track>
è simile all'elemento <source>
in quanto entrambi hanno un attributo src
che rimanda ai contenuti di riferimento. Per un tag <track>
, rimanda a un
file WebVTT.
L'attributo label
specifica come è possibile identificare una determinata traccia nell'interfaccia.
Per fornire tracce per più lingue, aggiungi un tag <track>
separato per ogni
file WebVTT che fornisci e indica la lingua utilizzando l'attributo srclang
.
Dai un'occhiata a questo esempio di tag <video>
con due tag <track>
.
Aggiungi un elemento <track>
come elemento secondario dell'elemento <video>
.
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
È disponibile anche un esempio che puoi visualizzare su Glitch.
Struttura del file WebVTT
Ecco un file WebVTT ipotetico per la demo. Si tratta di un file di testo contenente una serie di prompt. Ogni cue è un blocco di testo da visualizzare sullo schermo e l'intervallo di tempo durante il quale viene visualizzato.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Ogni elemento all'interno del file della traccia è un cue. Ogni cue ha un'ora di inizio e un'ora di fine, separate da una freccia, seguite dal testo del cue. Gli indicatori possono anche avere ID, ad esempio railroad
e manuscript
. I segnali sono separati da una linea vuota.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
I tempi di cue sono in formato hours:minutes:seconds.milliseconds
. L'analisi è rigorosa.
Ciò significa che i numeri devono essere riempiti con zeri, se necessario: ore, minuti e secondi devono avere due cifre (00 per un valore pari a zero) e i millisecondi devono avere tre cifre (000 per un valore pari a zero). Puoi trovare un ottimo strumento di convalida WebVTT all'indirizzo
Live WebVTT Validator, che controlla la presenza di errori nella formattazione dell'ora e
problemi come orari non sequenziali.
Puoi creare un file VTT manualmente, anche se esistono molti servizi che lo fanno per te.
Come puoi vedere negli esempi precedenti, il formato WebVTT è piuttosto semplice. Basta aggiungere i dati di testo insieme ai tempi.
Tuttavia, cosa succede se vuoi che i sottotitoli vengano visualizzati in una posizione diversa con
allineamento a sinistra o a destra? Magari per allineare i sottotitoli codificati con la posizione
attuale dell'interlocutore o per non intralciare il testo. WebVTT definisce le impostazioni per farlo,
e altro ancora, direttamente all'interno del
.vtt
file. Prendi nota di come viene definito il posizionamento dei sottotitoli codificati aggiungendo le impostazioni dopo le definizioni degli intervalli di tempo.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Un'altra funzionalità utile è la possibilità di applicare stili ai prompt utilizzando CSS. Ad esempio, potresti volere utilizzare un gradiente lineare grigio come sfondo, con un colore di primo piano papayawhip
per tutte le didascalie e tutto il testo in grassetto colorato peachpuff
.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Se ti interessa saperne di più sullo stile e il tagging dei singoli prompt, la specifica WebVTT è una buona fonte di esempi avanzati.
Tipi di tracce di testo
Hai notato l'attributo kind
dell'elemento <track>
? Viene utilizzato per indicare la relazione tra la traccia di testo specifica e il video. I
valori possibili dell'attributo kind
sono:
captions
: per i sottotitoli codificati ricavati dalle trascrizioni e possibilmente per le traduzioni di qualsiasi audio. Adatto per persone con disabilità uditiva e nei casi in cui il video viene riprodotto con l'audio disattivato.subtitles
: per i sottotitoli, ovvero le traduzioni di parlato e testo in una lingua diversa da quella principale del video.descriptions
: per descrizioni delle parti visive dei contenuti video. Adatti a persone con disabilità visiva.chapters
: deve essere visualizzato quando l'utente naviga all'interno del video.metadata
: non visibile e può essere utilizzato dagli script.
Ora che hai compreso le nozioni di base per rendere un video disponibile e accessibile sulla tua pagina web, potresti chiederti se esistono casi d'uso più complessi. Scopri i framework multimediali e come possono aiutarti ad aggiungere video alla tua pagina web, offrendo al contempo funzionalità avanzate.