Questo articolo fornisce informazioni sul formato WebVTT (Web Video Text Track), che viene utilizzato per descrivere i dati di testo sincronizzati, ad esempio i sottotitoli per rendere i video più accessibili al pubblico.
L'accessibilità non è come la ciliegina su una torta. Non è nulla che metti su una con la speranza di introdurre il prodotto in un secondo momento. Sottotitoli codificati e screen reader le descrizioni sono l'unico modo in cui molti utenti possono fruire dei tuoi video e, in alcuni giurisdizioni, sono persino richiesti dalla legge o dai regolamenti.
Aggiungi <track> tag
Per aggiungere sottotitoli codificati o descrizioni dello screen reader a un video sul web, aggiungi una <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> può anche aiutare i motori di ricerca a comprendere i contenuti di un video.
Tuttavia, queste funzionalità non rientrano nell'ambito di questo articolo.
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 sarà una determinata traccia.
identificati nell'interfaccia.
Per fornire tracce in più lingue, aggiungi un tag <track> separato per ogni traccia
Il file WebVTT che stai fornendo e indica la lingua utilizzando l'srclang
.
Di seguito è riportato un esempio di tag <video> con due tag <track>. C'è anche un
esempio che puoi visualizzare su Glitch (fonte).
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>
Struttura del file WebVTT
Di seguito è riportato un file WebVTT ipotetico per la demo collegata sopra. Il file è un un file di testo contenente una serie di indicazioni. Ogni segnale è un blocco di testo da visualizzare sullo schermo e l'intervallo di tempo durante il quale verrà 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 è chiamato cue. Ogni segnale ha un'ora di inizio
ora di fine separate da una freccia, con il testo del suggerimento nella riga sottostante. I consigli possono
facoltativamente hanno anche ID come railroad e manuscript nell'esempio riportato di seguito.
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 d'azione sono nel 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. Devi solo aggiungere i dati di testo insieme alle tempistiche.
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
dopo le definizioni dell'intervallo 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 utile funzionalità è la possibilità di applicare stili ai segnali tramite CSS. Magari vuoi
per utilizzare un gradiente lineare di grigio come sfondo, con il colore di primo piano
papayawhip per tutte le didascalie e per tutto il testo in grassetto di colore peachpuff.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Se vuoi saperne di più sullo stile e sul tagging dei singoli la specifica WebVTT è una buona fonte per 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 delle trascrizioni ed eventualmente delle traduzioni di qualsiasi tipo di 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 potrebbe essere utilizzata dagli script.
Ora che hai compreso le basi per rendere un video disponibile e accessibile sulla tua pagina web, potresti chiederti casi d'uso più complessi. Il prossimo passo conoscere i framework multimediali e scoprire come possono aiutarti ad aggiungere video sulla tua pagina web, fornendo al contempo funzionalità avanzate.