Fecha de publicación: 20 de agosto de 2020
Las descripciones de los subtítulos y de los lectores de pantalla son la única forma en que muchos usuarios pueden experimentar tus videos y, en algunas jurisdicciones, incluso son obligatorios por ley o reglamentación. El formato WebVTT (pistas de texto de video web) se usa para describir datos de texto cronometrado, como subtítulos, para que tus videos sean más accesibles.
Agrega <track>
etiquetas
Para agregar subtítulos o descripciones para lectores de pantalla a un video web, agrega una etiqueta <track>
dentro de una etiqueta <video>
. Además de los subtítulos y las descripciones para lectores de pantalla, las etiquetas <track>
también se pueden usar para subtítulos y títulos de capítulos.
La etiqueta <track>
es similar al elemento <source>
, ya que ambos tienen un atributo 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.
Si quieres proporcionar pistas para varios idiomas, agrega una etiqueta <track>
independiente en cada archivo WebVTT que proporciones y, luego, indica el idioma con el atributo srclang
.
Observa esta etiqueta <video>
de ejemplo 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 mostrará en 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 seguimiento es una cue. Cada indicador tiene una hora de inicio y una 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 los números deben tener un relleno con 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). Hay un excelente validador de WebVTT en Live WebVTT Validator, que busca errores en el formato de hora y 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 que no se superpongan con el texto de la cámara. WebVTT define la configuración para hacer eso, y más, directamente dentro del archivo .vtt
. Toma nota de cómo se define la posición de los subtítulos agregando opciones de configuración después de las definiciones de 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 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 de color 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 usa para indicar 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. Adecuada para personas con discapacidad auditiva y en los casos en que el video se reproduce con el sonido silenciado.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. Adecuado para personas con discapacidad visual.chapters
: Se muestra cuando el usuario navega dentro del video.metadata
: No es visible y las secuencias de comandos pueden usarlo.
Ahora que comprendes los conceptos básicos de hacer que un video esté disponible y sea accesible en tu página web, es posible que te preguntes sobre casos de uso más complejos. Obtén información sobre los frameworks multimedia y cómo pueden ayudarte a agregar videos a tu página web y, al mismo tiempo, proporcionar funciones avanzadas.