Textos en los video con HTML 5

Aún tenemos un elemento más dentro del contenedor <video>, se trata del track una forma de colocar subtítulos o cualquier otro texto en el visionado del video.

Este explorador no reconoce la etiqueta video, puede descargar el video en

<a href="movie.mp4" >Descargar video</a>

</video>

HTML5 facilita enormemento la inserción de videos

En este pequeño ejemplo simplemente hemos señalado que existe una pista para subtítulos que está colocada en el archivo de texto movie.vtt. Estos archivos de texto deben tener un formato adecuado que puede ser WEBVTT o TTML (ambos estándars publicados por W3C). Para subtítulos contienen los textos y los instantes en que deben aparecer y desparecer de pantalla. Funciona bien con Chrome y con Mozilla y Edge (desde 12). He aquí uin ejemplo:

Y aquí tenemos una el archivo vtt del ejemplo, recordar que se debe guardar con formato UTF-8, por los acentos y demás particularidades del idioma:
Como véis se señalan los tiempos en formato hh:mm:ss.ddd (horas, minutos, segundos con dos dígitos y milésimas de segundo, con tres dígitos) y van seguidos del texto que se verá en ese intervalo. Más sobre formato WEBVTT (en inglés)

WEBVTT

00:00:02.000 -->

00:00:05.000

Bonito paisaje

La campiña

00:00:05.001 -->

00:00:10.000

Y aquí el pajarito

Cantando feliz

Los atributos que admite este elemento hijo de video son

Nombre	Valores	Uso
default		Para señalar el idioma usado por defecto
kind	captions chapters Descripcións metadata subtitles	Tipo de dato mostrado: Título Capítulos Descripciones Metadatos para scripts Subtítulos
label	Texto	El título de la pista, para el menú CC de los controles de video, que permite elegir una u otra.
src	URL	El lugar donde se encuentra el archivo de texto con el contenido a mostrar
srclang	idioma	Código de idioma (es, en, de, it...)

El uso de track es bastante más extenso de lo aquí indicado pero con estas breves notas es suficiente para comenzar a trabajar con él.

Si activas la opción controls, el usuario podrá cambiar el idioma de los subtítulos mediante el botón de configuración del video.

El estilo del subtitulo es definible usando el pseudo elemento CSS ::cue con el podemos modificar los estilos habiutales de texto como puedan ser color, tamaño, transparencia, fondo, sombreado, interlineado entre otros, como puedes ver en el ejemplo

<head>

<style>

video::cue{

color:yellow;

}

</style>

</head>

<body>

Este explorador no reconoce la etiqueta video, puede descargar el video en

<a href="movie.mp4" >Descargar video</a>

</video>

</body>

El atributo track tiene bastante más complejidad, es útil para los doblajes de videos o para subtitular. Mejora la accesibilidad de la página