En este artículo, obtendrás información sobre el formato WebVTT (seguimientos de texto de video web), que se usa para describir los datos de texto temporizado, como subtítulos y hacer que los videos sean más accesibles para tu público.
La accesibilidad no es como la cereza de un pastel. Nunca es lo que pones en un de la lista con la esperanza de presentarla más adelante. Subtítulos y lector de pantalla las descripciones son la única forma en que muchos usuarios pueden experimentar tus videos y, en algunos jurisdicciones, incluso son exigidas por ley o reglamentación.
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> también puede ayudar a los motores de búsqueda a entender el contenido de un video.
Sin embargo, estas funciones están fuera del alcance de este artículo.
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 será una pista en particular.
identificados en la interfaz.
Para proporcionar pistas para varios idiomas, agrega una etiqueta <track> independiente para cada uno.
el archivo WebVTT que proporcionaste y, luego, indica el idioma con el srclang
.
A continuación, se muestra una etiqueta <video> de ejemplo con dos etiquetas <track>. También hay un
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 del archivo WebVTT
A continuación, se muestra un archivo WebVTT hipotético para la demostración vinculada anteriormente. El archivo 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 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 se denomina indicación. Cada indicador tiene una hora de inicio y
hora de finalización separada por una flecha, con el texto de la inserción en la línea siguiente. Las señales pueden
De manera opcional, también puedes tener IDs como railroad y manuscript en el siguiente ejemplo.
Los indicios 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, 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
como tiempos no secuenciales.
Puedes crear un archivo VTT manualmente, aunque existen muchos servicios crearlos por ti.
Como puedes ver en los ejemplos anteriores, el formato WebVTT es bastante simple. Solo tienes que agregar los datos de texto junto con los tiempos.
Sin embargo, ¿qué pasa si quieres
que los subtítulos se procesen en una posición diferente
alineación a la izquierda o a la derecha? Quizás para alinear los subtítulos con el orador actual
o para que no estorbe el texto que aparece en la cámara. WebVTT define la configuración para hacer eso,
y mucho más, directamente
.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 dar estilo a las indicaciones 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 quieres obtener más información sobre el estilo y el etiquetado de 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. El
valores posibles del atributo kind son los siguientes:
captions: Para subtítulos de transcripciones y, posiblemente, de 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 las partes visuales del contenido del video. Apto para personas con discapacidad visual.chapters: Se muestra cuando el usuario navega en el video.metadata: No es visible, y es posible que lo usen las secuencias de comandos.
Ahora que comprendes los conceptos básicos para que un video esté disponible y sea accesible en tu página web, tal vez te preguntes sobre casos de uso más complejos. A continuación, obtén información sobre los marcos de trabajo de contenido multimedia y cómo pueden ayudarte a mejorar videos a tu página web mientras proporcionas funciones avanzadas.