Che cos’è WebVTT?

WebVTT (Web Video Text Tracks Format) è un formato di sottotitoli basato su testo usato per aggiungere tracce di testo sincronizzato ai video. È il formato ufficiale supportato da HTML5 tramite l’elemento <track>, che consente di aggiungere:

• Sottotitoli (traduzione del parlato)
• Didascalie (parlato ed effetti sonori)
• Descrizioni (informazioni visive per i lettori di schermo)
• Capitoli (punti navigabili nel video)
• Metadati

Struttura di base di WebVTT

• Un file WebVTT è composto da:
  • Un header opzionale (WEBVTT).
  • Metadati opzionali (commenti o blocchi di stile/script).
  • Cue (segmenti di testo con tempi e contenuto).

1. Formato del cue

Un cue ha la seguente struttura:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [impostazioni cue]
Testo del payload...

• Temporizzazione: orari di inizio e fine nel formato HH:MM:SS.mmm.
• Impostazioni (opzionali):
  • vertical (lr/rl per testo verticale)
  • line (posizionamento)
  • position (allineamento orizzontale)
  • size (larghezza/percentuale)
  • align (start/middle/end)

2. Payload del cue

• Può contenere testo semplice o markup:
  • Tag: <b>, <i>, <u>, <ruby>, <lang>, ecc.
  • Timestamp (<00:00:05.000>) per testo in stile karaoke.

3. Stile & CSS

• Lo stile può essere applicato tramite:
  • Cue in linea (usando i tag).
  • Pseudo‑elementi CSS (::cue, ::cue-region) in HTML.

4. Tracce di metadati

• WebVTT può contenere metadati (JSON, ecc.) per applicazioni interattive.

5. Codifica del file

• Deve essere codificato in UTF‑8.
• Le righe terminano con \r\n, \n o \r.

6. Regole di elaborazione

• I parser devono gestire file malformati in modo robusto.
• Il BOM (Byte Order Mark) è opzionale.

7. Integrazione con HTML5

• Usato con l’elemento <track>:

  <video>
    <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
  </video>
  

  • kind può essere subtitles, captions, descriptions, chapters o metadata.

8. Supporto nei browser

• Ampiamente supportato nei browser moderni (Chrome, Firefox, Safari, Edge).

9. Casi d’uso

• Sottotitoli/Didascalie per l’accessibilità.
• Testi karaoke con testo sincronizzato.
• Navigazione a capitoli nei video.
• Metadati per app video interattive.

Esempio di file WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Benvenuti al nostro tutorial su WebVTT.

00:00:04.000 --> 00:00:08.000
In questo video imparerete come aggiungere sottotitoli ai vostri video HTML5.

I motori di ricerca non possono “guardare” il tuo video, ma possono leggere contenuti basati su testo. Utilizzando i file WebVTT aggiungi testo indicizzabile che:

• Migliora la scoperta: Google può indicizzare le didascalie e le trascrizioni, facendo apparire i tuoi video in più risultati di ricerca.
• Aumenta il coinvolgimento: i video sottotitolati mantengono gli utenti più a lungo, incrementando la durata della sessione e riducendo la frequenza di rimbalzo.
• Rafforza l’accessibilità: le didascalie sono essenziali per utenti sordi o con problemi di udito e sono favoriti dagli algoritmi SEO.

Quando un file WebVTT è associato a un video su una pagina web, Google può analizzare e comprendere quel testo sincronizzato, rendendo il contenuto più rilevante per determinate query.

Come aggiungere WebVTT a un video HTML5

Puoi includere un file WebVTT nel tuo video usando l’elemento <track>:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: percorso del tuo file .vtt
• kind: tipo di traccia testuale (subtitles, captions, chapters, ecc.)
• srclang: codice lingua (es. en, es)
• label: etichetta della traccia mostrata nel lettore

WebVTT vs SRT: qual è la differenza?

Strumenti per creare e modificare file WebVTT

Puoi creare o modificare file .vtt usando:

• Editor di testo: VS Code, Sublime Text
• Editor di sottotitoli: Subtitle Edit, Amara, Aegisub
• Convertitori: Usa strumenti per convertire SRT in VTT e viceversa

Come aprire un file WebVTT?

Per aprire un file WebVTT (.vtt), puoi usare qualsiasi editor di testo o editor di sottotitoli.

Aprire in un editor di testo

• Windows: Notepad, Notepad++, VS Code
• macOS: TextEdit, Sublime Text
• Linux: Gedit, nano, Vim

Poiché i file .vtt sono testo semplice, puoi visualizzarli e modificarli come qualsiasi altro file di testo.

Aprire in un editor di sottotitoli

Per una formattazione migliore, anteprima e sincronizzazione:

• Subtitle Edit (Windows)
• Aegisub (cross‑platform)
• Amara (basato sul web)

Aprire in un browser

1. Crea un semplice file HTML con un tag <video> e un tag <track>.
2. Apri il file HTML in un browser per visualizzare il video con i sottotitoli.

Caratteristiche principali dei file ASS

FAQ

D1: Qual è la differenza tra WebVTT e SRT?

R: WebVTT si basa su SRT ma aggiunge funzionalità cruciali come il posizionamento del testo, i tag vocali, lo styling CSS e il supporto ai metadati, oltre all’integrazione nativa con i video HTML5.

D2: Come aggiungo sottotitoli WebVTT a YouTube?

R: Carica il tuo file .vtt quando aggiungi i sottotitoli al video, oppure usa la generazione automatica di didascalie di YouTube e scarica il file WebVTT generato per modificarlo.

D3: I file WebVTT possono includere immagini?

R: La specifica WebVTT non supporta direttamente immagini incorporate, ma è possibile utilizzare cue di metadati con URL e implementare il rendering di immagini personalizzato tramite JavaScript.

D4: Perché i miei stili WebVTT non vengono applicati?

R: Verifica che i blocchi STYLE compaiano prima del primo cue, che non contengano righe vuote e che usino correttamente lo pseudo‑elemento ::cue. Controlla anche la compatibilità del browser.

D5: I file WebVTT funzionano con protocolli di streaming come HLS?

R: Sì, HLS (HTTP Live Streaming) supporta WebVTT segmentati per lo streaming efficiente di didascalie insieme al contenuto video.

Riferimenti

• WebVTT: The Web Video Text Tracks Format