En este artículo, obtendrás información sobre el formato WebVTT (pistas de texto de video web), que se usa para describir datos de texto temporizado, como subtítulos, a fin de que los videos sean más accesibles para tu público.
La accesibilidad no es como congelar los pasteles. Nunca es algo que hayas agotado con la esperanza de presentarlo más adelante. Los subtítulos y las descripciones de los lectores de pantalla son la única forma en que muchos usuarios pueden experimentar tus videos y, en algunas jurisdicciones, incluso son exigidos por la ley o las reglamentaciones.
Agrega <track> etiquetas
Para agregar subtítulos o descripciones del lector de pantalla a un video web, agrega una etiqueta <track> dentro de una etiqueta <video>. Además de los subtítulos y las descripciones del lector de pantalla, las etiquetas <track> también se pueden usar para los subtítulos y los títulos de los capítulos.
La etiqueta <track> también puede ayudar a los motores de búsqueda a comprender el contenido de un video.
Sin embargo, esas funciones están fuera del alcance de este artículo.
La etiqueta <track> es similar al elemento <source>, ya que ambos tienen un atributo src que apunta al contenido al que se hace referencia. En el caso de una etiqueta <track>, apunta a un archivo WebVTT. El atributo label especifica cómo se identificará un segmento en particular en la interfaz.
Para proporcionar pistas en varios idiomas, agrega una etiqueta <track> independiente para cada archivo WebVTT que proporciones y, luego, indica el idioma con el atributo srclang.
A continuación, se muestra un ejemplo de etiqueta <video> con dos etiquetas <track>. También hay una muestra que puedes ver en Glitch (fuente).
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>
Estructura de archivos WebVTT
A continuación, se muestra un archivo WebVTT hipotético para la demostración cuyo vínculo aparece arriba. Se trata de un archivo de texto que contiene una serie de indicaciones. Cada indicación es un bloque de texto para mostrar en la pantalla y el intervalo de tiempo durante el cual se mostrará.
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 pista se denomina indicador. Cada indicación tiene una hora de inicio y una de finalización separadas por una flecha, con texto de la indicación en la siguiente línea. De manera opcional, los indicadores también pueden tener IDs como railroad y manuscript en el siguiente ejemplo.
Los indicadores están separados 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 los números deben tener relleno de cero si es necesario: las horas, los minutos y los segundos deben 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 y problemas como los horarios no secuenciales.
Puedes crear un archivo VTT de forma manual, ya que hay muchos servicios que los crearán por ti.
Como puedes ver en los ejemplos anteriores, el formato WebVTT es bastante simple. Solo agrega los 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? Tal vez para alinear los subtítulos con la posición actual del orador o para evitar que se vea el texto en la cámara. WebVTT define la configuración para hacer eso y más, directamente dentro del archivo .vtt. Para observar cómo se define la posición de los subtítulos, agrega opciones de configuración después de las definiciones del intervalo 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 diseñar señales con CSS. Quizás quieras 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 estilo y el etiquetado de indicadores 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 usa para indicar qué relación tiene la pista de texto particular con el video. Los valores posibles del atributo kind son los siguientes:
captions: Para subtítulos de transcripciones y posibles traducciones de cualquier audio. Apto para personas con discapacidad auditiva y en los casos en que el video se reproduce en silencio.subtitles: Para subtítulos, es decir, traducciones de voz y texto en un idioma diferente del idioma principal del video.descriptions: Para descripciones de partes visuales del contenido de video. Apto para personas con discapacidad visual.chapters: Se muestra cuando el usuario navega dentro del video.metadata: No es visible y puede usarse en secuencias de comandos.
Ahora que comprendes los conceptos básicos para hacer que un video esté disponible y se pueda acceder a él en tu página web, es posible que te preguntes sobre casos de uso más complejos. A continuación, aprenderás sobre los marcos de trabajo de contenido multimedia y cómo pueden ayudarte a agregar videos a tu página web y, al mismo tiempo, proporcionar funciones avanzadas.