Data di pubblicazione: 20 agosto 2020
I sottotitoli e le descrizioni degli screen reader sono l'unico modo che molti utenti possono guardare i tuoi video e, in alcune giurisdizioni, sono persino richiesti ai sensi delle leggi o dei 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.
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 allo screen reader
descrizioni, <track> tag possono essere utilizzati anche per i sottotitoli e i titoli dei capitoli.
Il tag <track> è simile all'elemento <source> in quanto entrambi hanno un valore src
che rimanda a contenuti di riferimento. Per un tag <track>, rimanda a un
File WebVTT.
L'attributo label specifica come può essere una determinata traccia
identificati 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>
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 segnali. Ogni segnale è un blocco di testo da visualizzare sullo schermo e l'intervallo di tempo durante il quale viene visualizzata.
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 di traccia è un cue. Ogni cue ha un'ora di inizio e un'ora di fine, separate da una freccia, seguite dal testo del cue. I consigli possono avere anche
ID come 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.
In altre parole, i numeri devono essere riempiti da zero se necessario: ore, minuti e secondi
deve avere due cifre (00 se il valore è zero) e i millisecondi devono avere tre
cifre (000 per un valore zero). C'è un ottimo strumento di convalida WebVTT su
Strumento di convalida di WebVTT dal vivo, che controlla la presenza di errori di formattazione dell'ora e
come i tempi non sequenziali.
Puoi creare un file VTT a mano, pensando che ci siano molti servizi che a crearle per te.
Come puoi vedere negli esempi precedenti, il formato WebVTT è piuttosto semplice. Basta aggiungere i dati di testo insieme ai tempi.
Se però vuoi che i sottotitoli vengano visualizzati in una posizione diversa
allineamento a destra o a sinistra? Magari per allineare i sottotitoli codificati a quelli dell'oratore
o di non intralciare il testo ripreso dalla fotocamera. WebVTT definisce le impostazioni per farlo,
e altro ancora, direttamente all'interno
.vtt. 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 sul 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>? È abituato a
indicano la relazione tra la traccia di testo specifica e il video. La
i possibili valori dell'attributo kind sono:
captions: per i sottotitoli codificati ricavati dalle trascrizioni e possibilmente per le traduzioni di qualsiasi audio. Adatti a persone con disabilità uditiva e nei casi in cui il video sia senza audio.subtitles: per i sottotitoli, ovvero le traduzioni di testi e discorsi in un lingua diversa da quella principale del video.descriptions: per le descrizioni delle parti visive dei contenuti video. Adatti a persone con disabilità visiva.chapters: destinata a essere visualizzata quando l'utente naviga all'interno della 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. Informazioni su Framework multimediali e come possono aiutarti ad aggiungere video alla tua pagina web, fornendo al contempo funzionalità avanzate.