Guía detallada de sintaxis de subtítulos WebVTT: Guía de desarrollo y depuración desde marcas de tiempo hasta estilos

La primera línea de un archivo WebVTT estándar debe ser la declaración WEBVTT. Después de la declaración se puede agregar un espacio y texto de descripción del archivo, y los diferentes bloques estructurales se separan por líneas en blanco. La mayoría de los reproductores HTML5 no pueden analizar correctamente los archivos que no incluyen el encabezado WEBVTT.

Los bloques de comentarios NOTE se usan para agregar anotaciones de desarrollo o descripciones de subtítulos, y admiten contenido de una o varias líneas. No se renderizan ni muestran por los reproductores. Durante el desarrollo y la depuración, los bloques NOTE se pueden usar para marcar párrafos de subtítulos que necesitan modificación, sin afectar el resultado final de reproducción.

Cada indicación de subtítulo se compone de una marca de tiempo y texto de visualización. El formato de marca de tiempo admite dos estilos de separador de milisegundos: el punto y la coma. La mayoría de los navegadores modernos solo admiten la notación con punto.

El campo de hora en las marcas de tiempo es opcional. Los subtítulos con una duración total menor a una hora pueden omitir el campo de hora, lo que da como resultado el formato MM:SS.sss. El formato completo es HH:MM:SS.sss. La hora de inicio y la hora de finalización se separan por el símbolo -->.

WebVTT admite seis etiquetas en línea estándar para modificar el estilo de visualización de texto parcial. Entre estas, b, i y u corresponden a negrita, cursiva y subrayado respectivamente, siguiendo las mismas reglas que las etiquetas HTML correspondientes. Los desarrolladores pueden usarlas directamente en la escritura manual.

La etiqueta ruby se usa para anotaciones de pinyin, la etiqueta lang se usa para marcar texto en diferentes idiomas, y la etiqueta voice se usa para etiquetar al hablante. Estas etiquetas se usan principalmente para clasificación de metadatos, y los reproductores pueden implementar renderizado diferenciado basado en ellas.

El pseudoelemento ::cue es un pseudoelemento CSS dedicado proporcionado para subtítulos WebVTT. Los desarrolladores pueden usar este pseudoelemento para modificar el estilo predeterminado de todos los subtítulos en una página web, y admite propiedades CSS comunes como color, fuente y fondo.

Los bloques STYLE se usan para definir estilos globales o específicos de la indicación dentro del archivo WebVTT. Los bloques REGION se usan para definir regiones de renderizado de subtítulos, y admiten mostrar diferentes subtítulos en varias regiones simultáneamente, lo que se usa comúnmente para la visualización lado a lado de subtítulos en varios idiomas.

El elemento track de HTML5 se usa para importar archivos de subtítulos WebVTT externos. El atributo kind del elemento track define el tipo de subtítulo, que tiene cinco valores posibles: subtitles, captions, descriptions, chapters, metadata.

Entre estos, subtitles corresponden a subtítulos de traducción generales, captions corresponden a subtítulos para usuarios con discapacidad auditiva que incluyen anotaciones de sonido ambiental, chapters corresponden a navegación por capítulos, y metadata almacena metadatos de la página y no se muestra. Diferentes reproductores manejan el atributo kind con comportamientos diferenciados.