Tag HTML <track>
Il tag <track> aggiunge sottotitoli, didascalie, descrizioni, capitoli o metadati a <audio> e <video> tramite file WebVTT.
Il tag <track> è uno degli elementi HTML5. Aggiunge tracce di testo temporizzate — sottotitoli, didascalie, descrizioni, capitoli o metadati — a un elemento multimediale <video> o <audio>. Una traccia è il modo standard per rendere accessibili i contenuti multimediali: consente agli spettatori sordi o con problemi di udito di leggere ciò che viene detto, permette a chi non conosce la lingua di seguire il contenuto e consente ai browser di offrire la navigazione per capitoli.
L'elemento <track> è sempre un elemento figlio di un elemento <video> o <audio>, posizionato dopo gli eventuali elementi <source>. È un elemento vuoto e punta (tramite src) a un file esterno WebVTT (.vtt) che contiene il testo temporizzato. Il browser mostra automaticamente quel testo durante la riproduzione del contenuto multimediale.
Un singolo elemento multimediale può contenere diversi elementi <track> — ad esempio uno per ogni lingua — ma non può avere due tracce che condividono lo stesso kind, srclang e label.
Sintassi
Il tag <track> è vuoto, il che significa che il tag di chiusura non è obbligatorio. Tuttavia, in XHTML, il tag <track> deve essere auto-chiuso (<track />).
Tag HTML <track>
<audio> or <video>
...
<track src="...">
...
</audio> or </video>Esempio del tag HTML <track>:
Tag HTML <track>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
default | default | Contrassegna la traccia come quella da abilitare per impostazione predefinita, a meno che le preferenze dell'utente non indichino che un'altra è più appropriata. Solo una traccia per elemento multimediale può avere questo attributo. |
kind | subtitles, captions, descriptions, chapters, metadata | Definisce il tipo di traccia di testo (vedere la tabella seguente). Il valore predefinito è subtitles. |
label | text | Un titolo leggibile dall'utente per la traccia. Questo è il nome mostrato all'utente nel menu di selezione delle tracce del player (ad es. "English", "Français"). |
src | URL | Il percorso del file WebVTT (.vtt). Obbligatorio. |
srclang | language_code | La lingua del testo della traccia come tag BCP 47 (ad es. en, fr, pt-BR). Obbligatorio quando kind="subtitles". |
Valori dell'attributo kind
| Valore | Scopo |
|---|---|
subtitles | Traduzione del dialogo per gli spettatori che possono sentire ma potrebbero non capire la lingua. Richiede srclang. |
captions | Una trascrizione del dialogo più i suoni non verbali (effetti sonori, segnali musicali, chi sta parlando). Destinata agli spettatori sordi e con problemi di udito. |
descriptions | Descrizioni testuali del contenuto visivo del video, destinate a essere lette ad alta voce (sintesi vocale) per gli utenti ciechi o con problemi di vista quando l'azione non è trasmessa dall'audio. |
chapters | Titoli dei capitoli utilizzati per navigare nel contenuto multimediale. |
metadata | Dati da utilizzare tramite script. Questa traccia non viene mostrata all'utente. |
Il tag <track> supporta anche gli Attributi globali e gli Attributi evento.
Che cos'è un file WebVTT?
Il testo mostrato da un <track> risiede in un file separato scritto nel formato WebVTT (Web Video Text Tracks), salvato con estensione .vtt e servito come text/vtt. Ogni file WebVTT inizia con la riga WEBVTT, seguita da uno o più cue. Ogni cue ha un intervallo di tempo (start --> end, nel formato hh:mm:ss.ttt) e il testo da visualizzare durante quell'intervallo:
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome to the demo video.È possibile avere molti cue, facoltativamente separati da righe vuote, e ogni cue può avere una riga ID opzionale sopra il suo timestamp. Il browser associa il tempo di riproduzione corrente a un cue e visualizza il suo testo sopra il contenuto multimediale.
Esempio con più tracce
Una configurazione comune è quella di offrire didascalie in una lingua e sottotitoli in un'altra. Assegna a ogni traccia un label chiaro in modo che gli utenti possano scegliere quella giusta dal menu del player, e contrassegna una sola traccia come default:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video
controls
width="320"
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
>
<track
default
kind="captions"
srclang="en"
label="English"
src="captions-en.vtt"
/>
<track
kind="subtitles"
srclang="fr"
label="Français"
src="subtitles-fr.vtt"
/>
</video>
</body>
</html>Il player mostra le voci "English" e "Français" nel suo menu sottotitoli/didascalie; le didascalie in inglese vengono visualizzate per impostazione predefinita perché quella traccia contiene l'attributo default.
Accessibilità
L'elemento <track> è il meccanismo HTML per soddisfare i criteri di successo chiave delle WCAG:
- Didascalie (WCAG 1.2.2) — fornisce un
<track kind="captions">affinché gli utenti sordi e con problemi di udito possano percepire sia il dialogo che i suoni importanti nei contenuti multimediali preregistrati. - Descrizione audio (WCAG 1.2.3 / 1.2.5) — fornisce un
<track kind="descriptions">affinché gli utenti ciechi e con problemi di vista ricevano una descrizione delle informazioni visive importanti.
Poiché il testo della traccia è testo temporizzato in un file separato, anche i motori di ricerca e le tecnologie assistive possono leggerlo, migliorando sia l'accessibilità che la reperibilità dei contenuti.