La etiqueta <track> HTML 5 se usa para especificar pistas de texto cronometradas externas para elementos de medios (es decir, el elemento <video> y el elemento <audio>). Las pistas de texto especificadas con la etiqueta <track> podrían incluir subtítulos, títulos, descripciones, capítulos y metadatos.

Ten en cuenta que el elemento <track> se introdujo por primera vez en HTML5 a finales de 2010 y, por lo tanto, el soporte del navegador para este elemento puede estar limitado por algún tiempo.

El elemento <track> se puede usar para agregar subtítulos cronometrados a un video y subtítulos ocultos al contenido de audio.

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0+23.0+12.10+6.0+XXX

Sintaxis

<audio>
<track kind | src | srclang | label | default>
</audio>
<video>
<track kind | src | srclang | label | default>
</video>
  • Etiqueta de cierre: No es necesario

Usos de la etiqueta <track>

El siguiente ejemplo demuestra el uso de la etiqueta <track>.

<!DOCTYPE html>
<title>Mi Ejemplo</title>
<video controls="controls" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/122116/2010-0927-KMOV-News-4.png" width="640" height="360" crossorigin="anonymous">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/122116/2010-0927-KMOV-News-4.mp4" type="video/mp4">
<track src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/122116/2010-0518-KMOV-News-4_3.vtt" kind="subtitles" srclang="en" label="Testola" default>
</video>

El ejemplo anterior utiliza un archivo llamado 2010-0518-KMOV-News-4_3.vtt para presentar los subtítulos.

Aquí está el contenidos del archivo 2010-0518-KMOV-News-4_3.vtt:

WEBVTT
1
00:00:01.000 --> 00:00:08.000
This is the first line of text,
displaying from 1-8 seconds

El archivo simplemente especifica qué texto mostrar en qué partes del video. Para agregar más subtítulos, simplemente agrega más texto y especifica los puntos apropiados en el video que deben mostrarse.

Atributos para la etiqueta <track>

Los atributos que puedes agregar a esta etiqueta se enumeran a continuación.

  • Atributos específicos del elemento

La siguiente tabla muestra los atributos que son específicos de esta etiqueta/elemento <track>.

AtributoDescripción
kindEspecifica el tipo de pista de texto. Este atributo es un atributo enumerado.

Los valores posibles para el atributo “kind” son:

ValorDescripción
subtitlesTranscripción o traducción del diálogo. Esto puede ser útil cuando el sonido está en un idioma diferente al que el usuario puede entender. Todos los subtítulos se superponen en el vídeo. Este es el valor por defecto.
captionsTranscripción o traducción de los diálogos, efectos de sonido, pistas musicales relevantes y otra información de audio relevante. Esto puede ser útil cuando el sonido no está disponible o no es claramente audible (por ejemplo, porque está silenciado, ahogado por el ruido ambiental o porque el usuario es sordo). Todos los captions se superponen en el vídeo; se etiquetan como apropiados para la dificultad de audición.
descriptionsDescripciones textuales del componente de vídeo del recurso multimedia, destinadas a la síntesis de audio cuando el componente visual está opaco, no está disponible o no es utilizable (por ejemplo, porque el usuario está interactuando con la aplicación sin pantalla mientras conduce o porque es ciego). Todas las descriptions se sintetizan como audio.
chaptersTítulos de los capítulos, destinados a ser utilizados para navegar por los recursos de los medios de comunicación. Todos los chapters se muestran como una lista interactiva en la interfaz del agente de usuario/navegador.
metadataPistas destinadas a ser usadas desde el script. No visualizado por el user agent.
srcEspecifica la URL de los datos de la pista de texto. Atributo obligatorio.
srclangEspecifica el idioma de la pista de texto. El valor debe ser una etiqueta de idioma BCP 47 válida. Este atributo es obligatorio si el atributo de tipo del elemento es “subtitles”.
labelProporciona un título legible por el usuario para la pista.
defaultEspecifica que la pista debe estar habilitada si las preferencias del usuario no indican que otra pista sería más apropiada. No debe haber más de un elemento de pista con el mismo nodo padre con el atributo por defecto especificado.
  • Atributos globales: Mira aquí todos los atributos globales.
  • Atributos de contenido del gestor de eventos: Aquí están los atributos de contenido estándar del manejador de eventos HTML 5.

¡Si tienes alguna duda deja tu comentario y comparte este artículo en tus redes sociales! :’)

5/5 - (9 votos)