Fecha de publicación: 20 de agosto de 2020
Los subtítulos y las descripciones para lectores de pantalla son la única forma en que muchos usuarios pueden disfrutar de tus videos y, en algunas jurisdicciones, incluso son obligatorios por ley o reglamento. El formato WebVTT (pistas de texto de video web) se usa para describir datos de texto sincronizados, como subtítulos, para que tus videos sean más accesibles.
Agrega <track> etiquetas
Para agregar subtítulos o descripciones del lector de pantalla a un video web, agrega <track>.
dentro de una etiqueta <video>. Además de subtítulos y lector de pantalla
descripciones, también se pueden usar etiquetas <track> para los subtítulos y los títulos de los capítulos.
La etiqueta <track> es similar al elemento <source>, ya que ambos tienen un src
que apunta al contenido al que se hace referencia. Para una etiqueta <track>, apunta a un
Archivo WebVTT.
El atributo label especifica cómo se puede identificar un segmento en particular en la interfaz.
Para proporcionar pistas para varios idiomas, agrega una etiqueta <track> independiente para cada archivo WebVTT que proporciones y, luego, indica el idioma con el atributo srclang.
Observa este ejemplo de etiqueta <video> con dos etiquetas <track>.
Agrega un elemento <track> como elemento secundario del elemento <video>.
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
También hay una muestra que puedes ver en Glitch.
Estructura del archivo WebVTT
Este es un archivo WebVTT hipotético para la demostración. Es un archivo de texto que contiene una serie de indicaciones. Cada indicación es un bloque de texto que se muestra en pantalla y el intervalo de tiempo durante el cual se muestran.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Cada elemento dentro del archivo de seguimiento es una indicación. Cada indicación tiene una hora de inicio y una hora de finalización, separadas por una flecha, seguidas del texto de la indicación. Las indicaciones también pueden tener IDs, como railroad y manuscript. Las indicaciones se separan por una línea vacía.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
Los tiempos de inserción están en formato hours:minutes:seconds.milliseconds. El análisis es estricto.
Esto significa que, si es necesario, los números deben incluir cero como horas, minutos y segundos.
debe tener dos dígitos (00 para un valor de cero) y los milisegundos deben tener tres
dígitos (000 para un valor de cero). Existe un excelente validador de WebVTT en
El Validador WebVTT en vivo, que comprueba si hay errores en el formato de hora
problemas, como tiempos no secuenciales.
Puedes crear un archivo VTT de forma manual, aunque hay muchos servicios que los crean por ti.
Como puedes ver en los ejemplos anteriores, el formato WebVTT es bastante simple. Solo agrega tus datos de texto junto con los tiempos.
Sin embargo, ¿qué sucede si deseas que los subtítulos se rendericen en una posición diferente con alineación a la izquierda o a la derecha? Quizás para alinear los subtítulos con la posición del interlocutor actual o para no interferir con el texto de la cámara. WebVTT define la configuración para hacerlo y mucho más directamente dentro del archivo .vtt. Toma nota de cómo se define la ubicación de los subtítulos agregando
después de las definiciones de los intervalos de tiempo.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Otra función útil es la capacidad de aplicar diseño a los indicadores con CSS. Quizás desees
para usar un gradiente lineal gris como fondo, con un color de primer plano de
papayawhip para todos los subtítulos y todo el texto en negrita peachpuff.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Si te interesa obtener más información sobre el diseño y el etiquetado de indicaciones individuales, la especificación de WebVTT es una buena fuente de ejemplos avanzados.
Tipos de pistas de texto
¿Notaste el atributo kind del elemento <track>? Se suele
indica qué relación tiene la pista de texto específica con el video. Los valores posibles del atributo kind son los siguientes:
captions: Para subtítulos de transcripciones y, posiblemente, traducciones de cualquier audio. Apto para personas con discapacidad auditiva y en los casos en que el se silenció la reproducción.subtitles: Para los subtítulos, es decir, las traducciones de voz y texto en una idioma diferente del principal del video.descriptions: Para descripciones de partes visuales del contenido de video. Adecuado para personas con discapacidad visual.chapters: Se muestra cuando el usuario navega en el video.metadata: No es visible y las secuencias de comandos pueden usarlo.
Ahora que comprendes los conceptos básicos para que un video sea accesible y esté disponible en tu página web, es posible que te preguntes sobre casos de uso más complejos. Más información sobre Marcos de trabajo de contenido multimedia y cómo pueden ayudarte a mejorar videos a tu página web, a la vez que proporcionas funciones avanzadas.