Etiqueta track HTML5: Poner subtítulos en vídeos y audios

Nueva entrada para repasar la etiqueta track HTML5, su funcionalidad es posibilitar la muestra de subtítulos, títulos, capítulos, descripciones o metadatos en los vídeos y audios en formato HTML5.

Estos textos se definen mediante un fichero externo en formato WebVTT. Otros post relacionados sobre HTML5 son:

• Todos los atributos de audio HTML5 y sus funcionalidades
• Todos los atributos de vídeo HTML5 y sus funcionalidades
• Atributo poster HTML5: Establacer una imagen de preview en vídeos
• Atributo muted HTML5: Silenciar los reproductores de vídeo y audio

Sintaxis de la etiqueta track HTML5 para vídeo y audio

Veamos la sintaxis para vídeo extraída de su web oficial:

<video width="320" height="240" controls>
    <source src="ruta-video.mp4" type="video/mp4">
    <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
</video>

Repasemos el código superior:

• Tenemos la etiqueta video HTML5 con el atributo controls para mostrar los controles en el player.
• Después con la etiqueta source establecemos la ruta física del vídeo a reproducir.
• Por último en la etiqueta track en el ‘atributo src‘ ponemos la ruta del fichero con los subtítulos (textos) en formato WebVTT, en el ‘atributo kind‘ el tipo de subtítulo, en el ‘atributo srclang‘ el idioma de los subtítulos y en ‘label’ un texto descriptivo del idioma.

En la imagen inferior podemos ver un ejemplo de un vídeo con subtítulos:

Para poner subtítulos en la etiqueta audio la cosa cambia un poco, todos pensaremos que es poner el código de la etiqueta track en el player de audio, buscando documentación en internet no he encontrada nada al respecto, lo que muchos hacen es reproducir el audio sobre un player de vídeo, aquí la sintaxis de ejemplo:

<video width="320" height="240" controls>
 <source src="ruta-audio.mp3" type="audio/mp3">
 <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
</video>

Valores del atributo kind

En caso de que se omita el tipo se entenderá como subtítulo (subtitles). Los diferentes valores/tipos que puede tener el ‘atributo kind’ son los siguientes:

• subtitles: Es una representación escrita del vídeo o audio, son los subtítulos de toda la vida. Se muestra sobre el player.
• metadata: Datos que no se muestran en el player, son datos técnicos.
• chapters: Es un texto pensado para usarlo cuando reproducimos capítulos y de esta manera ponerles un título.
• captions: Proporcionan una transcripción de audio. Puede incluir información no verbal importante como pistas de música o efectos de sonido. Puede indicar la fuente de la señal (por ejemplo, música, texto, carácter). Recomendado para usuarios sordos o cuando el sonido está silenciado.
• descriptions: Descripción textual del contenido del vídeo. Adecuado para usuarios que son ciegos o donde el vídeo no se puede ver.

Ejemplos de la etiqueta track HTML5 para vídeo y audio

Veamos en este sencillo ejemplo de un vídeo y audio con unos subtítulos en castellano:

<video id="videplayer" width="350" controls>
 <source src="/demos/2016/011-html5-video-golden_gate_bridge_timelapse_hd_stock_video.mp4" type="video/mp4">
 <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
 Tu navegador no soporta vídeo HTML5.
</video>

El código del audio es el siguiente:

<video width="350" height="150" controls>
 <source src="/demos/2016/014-audio-helicoptero.mp3" type="audio/mp3">
 <track src="subtitulos-audio.vtt" kind="subtitles" srclang="es" label="Español">
 Tu navegador no soporta HTML5 audio.
</video>

Os explico los ejemplos que son muy similares a las sintaxis anteriores:

• Tenemos dentro de las etiqueta video HTML5 el audio y vídeo a reproducir.
• En ‘source’ establecemos la ruta física del audio y vídeo.
• Por último en la etiqueta track en el ‘atributo src‘ ponemos la ruta del fichero con los subtítulos (textos) en formato WebVTT, en el ‘atributo kind‘ el tipo de subtítulo, en el ‘atributo srclang‘ el idioma de los subtítulos y en ‘label’ un texto descriptivo del idioma.

Los códigos WebTT para los subtítulos del vídeo son:

WEBVTT
00:01.000 --> 00:13.000
<v Presentación>Hola.

00:14.000 --> 00:22.000
<v Presentación>¿Qué tal estáis?

00:22.000 --> 00:31.000
Fin de los subtí­tulos

Y para los del audio son los siguientes:

WEBVTT
00:01.000 --> 00:03.000
<v Presentación>Hola.