---
title: '<track>: El elemento para pistas de texto incrustado'
slug: Web/HTML/Element/track
tags:
  - Accessibility
  - Contenido HTML insertado
  - Elemento
  - HTML
  - HTML5
  - Multimedia
  - Pistas de texto
  - Reference
  - Web
  - a11y
  - anotaciones
  - track
translation_of: Web/HTML/Element/track
original_slug: Web/HTML/Elemento/track
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">El <strong>elmento HTML <code>&lt;track&gt;</code></strong> es usado como hijo de los elementos multimedia, {{HTMLElement("audio")}} y {{HTMLElement("video")}}. Este te deja especificar pistas de texto temporizadas (o datos basados en el tiempo), por ejemplo para manejar automáticamente los subtítulos.</span> Las pistas de texto usan el <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">formato WebVTT</a> (archivos <code>.vtt</code>) o de pistas de texto para la web.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div>

<div class="hidden">La fuente para este ejemplo interactivo esta alojada en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una pull request.</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorías del contenido</a></th>
   <td>Ninguna</td>
  </tr>
  <tr>
   <th scope="row">Contenido permitido</th>
   <td>Ninguno, es un {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omision de etiquetas</th>
   <td>Como es un elemento vacío, la etiqueta de inicio debe estar presente y la etiqueta de cierre no debe estar presente.</td>
  </tr>
  <tr>
   <th scope="row">Padres permitidos</th>
   <td>Un elemento multimedia, {{HTMLElement("audio")}} o {{HTMLElement("video")}}.</td>
  </tr>
  <tr>
   <th scope="row">Rol ARIA implícito</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No hay rol correspondiente</a>.</td>
  </tr>
  <tr>
   <th scope="row">Roles ARIA permitidos</th>
   <td>No hay <code>role</code>s permitidos.</td>
  </tr>
  <tr>
   <th scope="row">Intefaz DOM</th>
   <td>{{domxref("HTMLTrackElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento incluye los <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globales</a>.</p>

<dl>
 <dt>{{htmlattrdef("default")}}</dt>
 <dd>Este atributo indica que esta pista de texto debe estar activada salvo que las preferencias del usuario indiquen que otra pista de texto es más apropiada. Este atributo solo puede ser usado en un elemento <code>track</code> por cada elemento multimedia.</dd>
 <dt>{{htmlattrdef("kind")}}</dt>
 <dd>Este atributo indica como esta pensada para usarse la pista de texto. Si lo omites el valor por defecto es <code>subtitles</code>. If the attribute contiene un valor invalido usará el valor <code>metadata</code> (Las versiones de Chrome anteriores a la 52 tratan un valor inválido como <code>subtitles</code>). Las siguientes palabras clave están permitidas:
 <ul>
  <li><code>subtitles</code>
   <ul>
    <li>Los subtítulos proporciona la traducción de contenido que no puede ser entendido por el espéctador. Por ejemplo diálogos o texto que no está en español en una película en español.</li>
    <li>Los subtítulos puede contener información adicional, normalmente información extra sobre el escenario. Por ejemplo el texto al principio de las películas de Stars Wars, o la fecha, el tiempo, y la ubicación de una escena.</li>
   </ul>
  </li>
  <li><code>captions</code>
   <ul>
    <li>Este valor provee una transcripción y posiblemente una traducción del audio.</li>
    <li>Puede incluir información no verbal importante como anotaciones sobre la música o efectos de sonido. Tambien puede indicar la fuente de la anotación (por ejemplo: música, texto, caracteres).</li>
    <li>Es adecuado para usuarios sordos o cuando el sonido está apagado.</li>
   </ul>
  </li>
  <li><code>descriptions</code>
   <ul>
    <li>Descripción textual del conenido del video.</li>
    <li>Adecuado para usuarios ciegos o cuando el video no se puede ver.</li>
   </ul>
  </li>
  <li><code>chapters</code>
   <ul>
    <li>Los títulos de los capítulos estan pensados para ser usados cuando el usuario esta navegando a través del recurso multimedia.</li>
   </ul>
  </li>
  <li><code>metadata</code>
   <ul>
    <li>Pistas de texto usadas por programas. No visibles para el usuario.</li>
   </ul>
  </li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>Da un título a la pista de texto que puedan entender los usuarios y que es usado por el navegador cuando esta mostrando la lista de pistas de texto disponibles.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>Señala la dirección de la pista de texto (archivo <code>.vtt</code>). Debe ser una URL valida. Este atributo debe ser especificado y su URL debe tener el mismo origen que el documento, salvo que el elemento {{HTMLElement("audio")}} o {{HTMLElement("video")}} que sea padre del elemento <code>track</code> tenga un atributo <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>.</dd>
 <dt>{{htmlattrdef("srclang")}}</dt>
 <dd>Señala el idioma de los datos de la pista de texto. Debe ser una etiqueta de idioma <a href="https://r12a.github.io/app-subtags/">BCP 47</a> valida. Si al atributo <code>kind</code> se le da el valor de <code>subtitles</code>, entonces <code>srclang</code> debe ser definido.</dd>
</dl>

<h2 id="Notas_de_uso">Notas de uso</h2>

<h3 id="Tipos_de_datos_para_pistas_de_texto">Tipos de datos para pistas de texto</h3>

<p>El tipo de dato que el elemento <code>track</code> añade al elemento multimedia es fijado en el atributo <code>kind</code>, que puede tener los valores de <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> or <code>metadata</code>. El elemento apunta a un archivo fuente que contiene texto temporizado que el navegador muestra cuando el usuario solicita datos adicionales.</p>

<p>Un elemento <code>media</code> no puede tener mas de un elemento <code>track</code> con el mismo valor en los atributos <code>kind</code>, <code>srclang</code>, y <code>label</code> a la vez.</p>

<h3 id="Detectando_cambios_en_las_anotaciones">Detectando cambios en las anotaciones</h3>

<p>{{page("/es/docs/Web/API/TextTrack/cuechange_event", "En el elemento track")}}</p>

<h2 id="Ejemplos">Ejemplos</h2>

<pre class="brush: html notranslate">&lt;video controls poster="/imagenes/ejemplo.gif"&gt;
   &lt;source src="ejemplo.mp4" type="video/mp4"&gt;
   &lt;source src="ejemplo.ogv" type="video/ogv"&gt;
   &lt;track kind="captions" src="captionsDeEjemplo.vtt" srclang="en"&gt;
   &lt;track kind="descriptions" src="descripciónDeEjemplo.vtt" srclang="en"&gt;
   &lt;track kind="chapters" src="capítulosDeEjemplo.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="subtítulosDeEjemplo_de.vtt" srclang="de"&gt;
   &lt;track kind="subtitles" src="subtítulosDeEjemplo_en.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="subtítulosDeEjemplo_ja.vtt" srclang="ja"&gt;
   &lt;track kind="subtitles" src="subtítulosDeEjemplo_oz.vtt" srclang="oz"&gt;
   &lt;track kind="metadata" src="etapaClave1.vtt" srclang="en"
     label="Etapa clave 1"&gt;
   &lt;track kind="metadata" src="etapaClave2.vtt" srclang="en"
     label="Etapa clave 2"&gt;
   &lt;track kind="metadata" src="etapaClave3.vtt" srclang="en"
     label="Etapa clave 3"&gt;
   &lt;!-- Fallback --&gt;
   ...
&lt;/video&gt;
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>

<div class="hidden">La tabla de compatibilidad en esta página está generada desde datos estructurados. Si quieres contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div>

<p>{{Compat("html.elements.track")}}</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/en-US/docs/HTML/WebVTT">El formato WebVTT para pistas de texto</a></li>
 <li>{{domxref("HTMLMediaElement.textTracks")}}</li>
</ul>