Come inserire una traccia VTT in un video HTML5

Se il filmato parte ma il testo non appare, verifica prima il caricamento della traccia, poi la sincronizzazione.

Collega il file

Metti video e VTT in UTF-8 sullo stesso sito. Inserisci track dentro video e risolvi il percorso a partire dalla pagina. srclang indica la lingua del testo, non necessariamente quella dell’audio. Assegna a ogni traccia un nome riconoscibile.

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

Prepara una prova con una sola traccia

Scarica il filmato dimostrativo e il VTT e mettili accanto alla pagina HTML su un server di prova. Nel codice di esempio si chiamano lesson.mp4 ed example-en.vtt. Apri l’indirizzo web per evitare le restrizioni applicate ai file locali.

La traccia contiene solo l’annuncio del laboratorio. A 8 secondi confronta la frase con l’esempio. A 13 secondi deve essere scomparsa. Se rimane anche disattivando la traccia, cerca altri sottotitoli attivi o testo impresso nel filmato.

Segui la richiesta quando il menu è vuoto

Apri la scheda Rete, ricarica e seleziona inglese. Se non trovi la richiesta .vtt, ispeziona l’elemento video nella pagina pubblicata: il sistema editoriale potrebbe aver eliminato track al salvataggio. Altrimenti confronta l’URL completo con la cartella di caricamento.

Leggi la risposta. Dopo WEBVTT devono esserci una riga vuota e i tempi. Una pagina di accesso può restituire 200 ma contiene HTML. Per un errore CORS, prova il file sulla stessa origine della pagina e controlla l’origine consentita e l’attributo crossorigin.

Individua il taglio dal tipo di ritardo

Scegli tre battute riconoscibili e confrontane l’attacco con i sottotitoli. Uno scarto costante suggerisce una sigla modificata. Se solo la terza è in ritardo, cerca un taglio dopo la seconda. Se lo scarto cresce, verifica quale versione sta servendo il lettore.

Nella pagina pubblicata cambia lingua, verifica una battuta e disattiva i sottotitoli. Confronta eventuali scritte residue con il video originale. Indica nome del video, traccia e tempo di riproduzione quando segnali il problema.

Esempio del flusso

Voce sintetica inglese su testo originale EasySub. L’esempio riprende la terza battuta dell’SRT: non è una nuova esportazione né una revisione umana professionale.

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · Scarica il video dimostrativo · SRT originale (inglese)

Verifica l’intervallo

Seleziona English e vai al secondo otto. Al secondo tredici la frase deve essere sparita. Apri l’indirizzo del VTT: una pagina di accesso con risposta 200 non è un file di sottotitoli. Controlla text/vtt e, per un altro dominio, crossorigin e la risposta CORS.