0Pricing
HTML Academy · Lección

Subtítulos con track y WebVTT

Añada subtítulos y subtítulos descriptivos a vídeos con track y archivos .vtt

Subtítulos con track y WebVTT es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Subtítulos y subtítulos descriptivos

La accesibilidad de los videos requiere alternativas textuales para el contenido de audio:

  • Subtítulos — transcripción de los diálogos; supone que el espectador puede oír los sonidos
  • Subtítulos descriptivos — diálogos y descripciones de los sonidos (para personas sordas)
  • Audiodescripciones — describen el contenido visual para las personas ciegas

El elemento track

El elemento <track> vincula un archivo de subtítulos o subtítulos descriptivos a un video:

<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>

Atributos de track

Atributos del elemento track:

  • src — ruta al archivo VTT
  • kind — tipo de pista (subtitles, captions, descriptions, chapters, metadata)
  • srclang — código de idioma BCP 47 (en, es, fr...)
  • label — nombre legible que se muestra en el menú de CC
  • default — booleano; esta pista se muestra de forma predeterminada

Formato WebVTT

WebVTT (Web Video Text Tracks) es el formato de archivo de subtítulos:

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...

Identificadores de señales VTT

Las señales VTT pueden tener identificadores opcionales:

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.

Configuración de las señales VTT

Las señales VTT admiten configuraciones de posicionamiento:

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.

Aplicación de estilos a las señales WebVTT con CSS

Aplique estilos a los cuadros de las señales con el pseudoelemento ::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;
}

Valores de kind de track

El atributo kind especifica el propósito de la pista de texto:

  • subtitles — traducción o transcripción de los diálogos
  • captions — diálogos y descripciones de sonidos para las personas sordas
  • descriptions — audiodescripción del contenido visual para las personas ciegas
  • chapters — títulos de capítulos para la navegación
  • metadata — datos legibles por máquinas para JavaScript

Pista de capítulos

Use kind=chapters para la navegación por los capítulos 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 de JavaScript

Acceda a los datos de las pistas mediante la 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);
});

Pista de metadatos para videos interactivos

Use pistas de metadatos para activar eventos de JavaScript en momentos específicos:

<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>

Requisitos de accesibilidad

WCAG exige subtítulos descriptivos para los videos pregrabados:

  • Nivel A — subtítulos descriptivos para todos los videos pregrabados con audio
  • Nivel AA — audiodescripciones para todos los videos pregrabados
  • Los subtítulos generados automáticamente (YouTube) no son suficientes sin revisión
  • Los subtítulos deben ser precisos, estar sincronizados y ser completos

Comprobación rápida

¿Cuál es la diferencia entre los tipos de pista subtitles y captions?

Resumen: track y WebVTT

Aspectos esenciales de los subtítulos y los subtítulos descriptivos:

  • <track src kind srclang label default> dentro de video
  • kind: subtitles, captions, descriptions, chapters, metadata
  • Formato de archivo WebVTT: WEBVTT + marca de tiempo --> marca de tiempo + texto
  • Aplique estilos a las señales con el pseudoelemento CSS ::cue
  • WCAG exige subtítulos descriptivos para los videos pregrabados

Preguntas frecuentes

¿La lección «Subtítulos con track y WebVTT» es gratis?

Sí — el texto completo de «Subtítulos con track y WebVTT» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Subtítulos con track y WebVTT»?

Añada subtítulos y subtítulos descriptivos a vídeos con track y archivos .vtt Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Subtítulos con track y WebVTT»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. El elemento audio: src, controls, loop y autoplay
  2. El elemento video y la relación de aspecto
  3. El elemento source para varios formatos
  4. Subtítulos con track y WebVTT
← Volver a HTML Academy