Pubblicato il 20 agosto 2020
I sottotitoli codificati e le descrizioni per gli screen reader sono l'unico modo in cui molti utenti possono guardare i tuoi video e, in alcune giurisdizioni, sono addirittura obbligatori per legge o regolamento. Il formato WebVTT (Web Video Text Track) viene utilizzato per descrivere i dati testuali sincronizzati, ad esempio i sottotitoli o i sottotitoli codificati, per rendere i tuoi video più accessibili.
Aggiungere tag <track>
Per aggiungere sottotitoli codificati o descrizioni per gli screen reader a un video web, aggiungi un tag <track>
all'interno di un tag <video>
. Oltre ai sottotitoli e alle descrizioni dello screen reader, puoi usare i tag <track>
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 a cui si fa riferimento. Per un tag <track>
, rimanda a un
file WebVTT.
L'attributo label
specifica in che modo un determinato canale può essere identificato 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
.
Osserva questo tag <video>
di esempio 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>
Puoi anche visualizzare un sample 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
. Gli indicatori sono separati da una riga 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 d'azione sono nel 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). Lo strumento di convalida WebVTT del live streaming offre un ottimo strumento di convalida WebVTT, che verifica la presenza di errori nella formattazione dell'ora e di problemi quali gli orari non sequenziali.
Puoi creare un file VTT a mano, pensando che esistano molti servizi che possono crearlo 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 codificati vengano visualizzati in una posizione diversa con un allineamento a sinistra o a destra? Ad esempio, per allineare i sottotitoli codificati alla posizione dell'altoparlante corrente o per non coprire il testo all'interno della fotocamera. 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 traduzioni di testi e discorsi in una lingua diversa da quella principale del video.descriptions
: per le 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 potrebbe essere utilizzata 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.