Video y formatos en 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.

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
 <source src="movie.webm" type="video/webm">
 <track kind="subtitles" src="/movie-es.vtt" lang="es" label="Español">
 <track kind="subtitles" src="/movie-en.vtt" lang="en" label="Inglés">
Este explorador no reconoce la etiqueta video, puede descargar el video en
<a href="movie.mp4" >Descargar video</a> .
</video>

En este pequeño ejemplo simplemente hemos señalado que existe una pista para subtítulos que está colocada en el archvido de texto movie.vtt. Estos archivos de texto deben tener un formato adecuado que puede ser WEBTT o TTML. Para subtítulos contienen los textos y los instantes en que deben aparecer y desparecer de pantalla. Funciona bien con Chrome y con Mozilla, pero no tanto con Iexplorer (11), para el que hay que crear un archivo .htaccess para agregar al servidor el tipo MIME de los archivos vtt (AddType text/vtt .vtt). 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:00.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 la pista usada por defecto
kind
captions chapters Descripcións metadata subtitles
Tipo de dato mostrado:
Título
Capítulos
Descripciones
Metadatos
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.