Agrega subtítulos a un video de tu sitio web con WebVTT

La configuración básica

Descarga el VTT de CueSprint y colócalo junto a tu video en el servidor. Después añade un elemento <track> dentro del <video>:

<video controls width="640">
  <source src="/media/demo.mp4" type="video/mp4">
  <track kind="captions" src="/media/demo.es.vtt" srclang="es" label="Español" default>
</video>

• kind="captions" indica al navegador que son subtítulos del diálogo.
• srclang y label dan nombre al idioma en el menú de subtítulos del reproductor.
• default activa la pista al cargar el video.

Lo que suele fallar

• La pista no carga: el VTT debe servirse desde el mismo sitio que la página, o desde un servidor que permita peticiones de otro origen. Sírvelo con el tipo de contenido text/vtt si puedes.
• Caracteres raros: mantén el archivo en UTF-8, tal como lo exporta CueSprint.
• No aparecen en videos de fondo que se reproducen solos y sin sonido: esos videos no suelen tener controles; añade default a la pista, o quema los subtítulos con CueSprint.

Varios idiomas

Añade un <track> por idioma. El espectador elige en el menú de subtítulos del reproductor:

<track kind="captions" src="/media/demo.es.vtt" srclang="es" label="Español" default>
<track kind="captions" src="/media/demo.en.vtt" srclang="en" label="English">

Para crear el segundo archivo, traduce las líneas de texto del VTT y deja intactas todas las líneas de tiempos.

Dales estilo

Los navegadores permiten dar estilo a los subtítulos WebVTT con el selector ::cue:

video::cue {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}

El VTT de CueSprint tiene una marca de tiempo antes de cada palabra. Los navegadores compatibles con las pseudoclases :past y :future pueden usarlas para un efecto karaoke, atenuando las palabras que aún no se han dicho:

video::cue(:future) {
  color: rgba(255, 255, 255, 0.5);
}

El soporte de estas pseudoclases varía entre navegadores; donde no existe, el subtítulo se muestra como texto normal. Para un resaltado idéntico en todas partes, exporta el MP4 con los subtítulos quemados.

Accesibilidad y SEO

Los subtítulos hacen tu video accesible para personas sordas o con pérdida auditiva y para cualquiera que lo vea sin sonido. La misma transcripción, publicada como texto debajo del video, da además a los buscadores palabras que indexar; mira nuestra guía para convertir subtítulos en contenido.