0Pricing
HTML Academy · Lezione

Sottotitoli con track e WebVTT

Aggiungere didascalie e sottotitoli ai video con track e file .vtt

Sottotitoli con track e WebVTT è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Sottotitoli e didascalie

L'accessibilità dei video richiede alternative testuali per i contenuti audio:

  • Sottotitoli — trascrizione dei dialoghi, presuppone che lo spettatore possa sentire i suoni
  • Didascalie — dialoghi + descrizioni dei suoni (per utenti sordi)
  • Audiodescrizioni — descrivono i contenuti visivi per gli utenti ciechi

L'elemento track

L'elemento <track> collega a un video un file di sottotitoli/didascalie:

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

Attributi dell'elemento track

Attributi dell'elemento track:

  • src — percorso del file VTT
  • kind — tipo di traccia (subtitles, captions, descriptions, chapters, metadata)
  • srclang — codice lingua BCP 47 (en, es, fr...)
  • label — nome leggibile mostrato nel menu CC
  • default — booleano; questa traccia viene mostrata per impostazione predefinita

Formato WebVTT

WebVTT (Web Video Text Tracks) è il formato dei file di sottotitoli:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

Identificatori dei cue VTT

I cue VTT possono avere identificatori facoltativi:

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

Impostazioni dei cue VTT

I cue VTT supportano impostazioni di posizionamento:

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

Stilizzare i cue WebVTT con CSS

Stilizzate i riquadri dei cue con lo pseudo-elemento ::cue:

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

Valori di kind per track

L'attributo kind specifica lo scopo della traccia di testo:

  • subtitles — traduzione o trascrizione dei dialoghi
  • captions — dialoghi + descrizioni dei suoni per utenti sordi
  • descriptions — audiodescrizione dei contenuti visivi per utenti ciechi
  • chapters — titoli dei capitoli per la navigazione
  • metadata — dati leggibili dalle macchine per JavaScript

Traccia dei capitoli

Usate kind=chapters per la navigazione tra i capitoli del video:

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

API TextTrack di JavaScript

Accedete ai dati della traccia con l'API TextTrack:

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

Traccia di metadati per video interattivi

Usate le tracce metadata per attivare eventi JavaScript in momenti specifici:

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

Requisiti di accessibilità

WCAG richiede didascalie per i video preregistrati:

  • Livello A — didascalie per tutti i video preregistrati con audio
  • Livello AA — audiodescrizioni per tutti i video preregistrati
  • Le didascalie generate automaticamente (YouTube) non sono sufficienti senza revisione
  • Le didascalie devono essere accurate, sincronizzate e complete

Controllo rapido

Qual è la differenza tra i tipi di traccia subtitles e captions?

Riepilogo: track e WebVTT

Elementi essenziali di sottotitoli e didascalie:

  • <track src kind srclang label default> all'interno di video
  • kind: subtitles, captions, descriptions, chapters, metadata
  • Formato del file WebVTT: WEBVTT + timestamp --> timestamp + text
  • Stilizzate i cue con lo pseudo-elemento CSS ::cue
  • WCAG richiede didascalie per i video preregistrati

Domande Frequenti

La lezione «Sottotitoli con track e WebVTT» è gratuita?

Sì — il testo completo di «Sottotitoli con track e WebVTT» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Sottotitoli con track e WebVTT»?

Aggiungere didascalie e sottotitoli ai video con track e file .vtt Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Sottotitoli con track e WebVTT»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. L’elemento audio: src controls loop autoplay
  2. L’elemento video e le proporzioni
  3. L’elemento source per più formati
  4. Sottotitoli con track e WebVTT
← Torna a HTML Academy