Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


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:

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

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

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:

Etiqueta track HTML5, subtítulos en vídeo

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:

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:

El código del audio es el siguiente:

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:

Y para los del audio son los siguientes:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Centro de preferencias de privacidad

Cookies imprescindibles

para medir la audiencia

ga,gdpr