Ahora hablaremos de un concepto un poco más avanzado que es realmente útil conocer. Muchas personas no pueden o no quieren escuchar el contenido de audio/vídeo que encuentran en la Web, al menos en determinados momentos. Por ejemplo:

• Muchas personas tienen deficiencias auditivas (más comúnmente conocidas como sordos o con dificultades auditivas), por lo que no pueden oír el audio.
• Otras no pueden oír el audio porque se encuentran en ambientes ruidosos (como un bar abarrotado cuando se retransmite un partido deportivo) o porque no quieren molestar a los demás si están en un lugar tranquilo (como una biblioteca).
• Las personas que no hablan el idioma del vídeo pueden querer una transcripción de texto o incluso una traducción que les ayude a entender el contenido multimedia.

¿No estaría bien poder ofrecer a estas personas una transcripción de las palabras que se pronuncian en el audio/vídeo? Pues bien, gracias al vídeo HTML5 se puede, con el formato WebVTT (en-US)") y el elemento <track>.

WebVTT es un formato para escribir archivos de texto que contienen múltiples cadenas de texto junto con metadatos tales como en qué momento del vídeo desea que se muestre cada cadena de texto, e incluso información limitada de estilo/posicionamiento. Estas cadenas de texto se llaman cues, y se pueden mostrar diferentes tipos para diferentes propósitos, siendo los más comunes:

subtítulos

Traducciones de material extranjero, para personas que no entienden las palabras pronunciadas en el audio.

leyendas

transcripciones sincronizadas de diálogos o descripciones de sonidos significativos, para que las personas que no pueden oír el audio entiendan lo que está pasando.

descripciones temporizadas

Texto para convertir en audio, al servicio de las personas con deficiencias visuales.

Un archivo WebVTT típico tendrá este aspecto:

Para que esto se muestre junto con la reproducción multimedia HTML, es necesario:

1. Guárdelo como archivo .vtt en un lugar adecuado.
2. Enlace el archivo .vtt con el elemento <track>. <track> debe colocarse dentro de <audio> o <video>, pero después de todos los elementos <source>. Utilice el atributo kind para especificar si las pistas son "subtítulos", " leyendas" o "descripciones". Además, utilice srclang para indicar al navegador en qué idioma ha escrito los subtítulos.

He aquí un ejemplo:

El resultado será un vídeo con subtítulos, como éste:

Para más detalles, lee Añadir subtítulos a vídeos HTML5. Puedes encontrar el ejemplo que acompaña a este artículo en Github, escrito por Ian Devlin (consulta también el código fuente.) Este ejemplo utiliza algo de JavaScript para permitir a los usuarios elegir entre diferentes subtítulos. Ten en cuenta que para activar los subtítulos, tienes que pulsar el botón "CC" y seleccionar una opción: English, Deutsch o Español.