path: root/files/pt-br/web/html/element/track/index.html

---
title: <track>
slug: Web/HTML/Element/track
tags:
  - Elemento
  - HTML
  - HTML5
  - Web
  - legenda
translation_of: Web/HTML/Element/track
---
<div>{{HTMLRef}}</div>

<p>O <strong>elemento HTML <code>&lt;track&gt;</code> </strong>é usado como filho dos elementos de mídia{{HTMLElement("audio")}} e {{HTMLElement("video")}}. Ele permite que você especifique faixas de texto temporizadas (ou dados baseados em tempo), por exemplo, para lidar automaticamente com legendas. As faixas são formatadas em <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT format</a> (arquivos <code>.vtt</code>) — Web Video Text Tracks or <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language (TTML).</a></p>

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

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Categorias de conteúdo</th>
   <td>Nenhuma</td>
  </tr>
  <tr>
   <th scope="row">Conteúdo permitido</th>
   <td>Nenhum, é um {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omissão de tag</th>
   <td>Como é um elemento vazio, a tag inicial deve estar presente e a tag final não deve estar presente.</td>
  </tr>
  <tr>
   <th scope="row">Permite Parentes</th>
   <td>Um elemento de mídia, antes de qualquer <a href="/en-US/docs/HTML/Content_categories#Flow_content">conteúdo de fluxo</a>.</td>
  </tr>
  <tr>
   <th scope="row">Funções ARIA permitidas</th>
   <td>Nenhum</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLTrackElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p>Este elemento inclui os <a href="/en-US/docs/HTML/Global_attributes">atributos globais</a>.</p>

<dl>
 <dt>{{htmlattrdef("default")}}</dt>
 <dd>This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one <code>track</code> element per media element.</dd>
 <dt>{{htmlattrdef("kind")}}</dt>
 <dd>How the text track is meant to be used. If omitted the default kind is <code>subtitles</code>. If the attribute is not present, it will use the <code>subtitles</code>. If the attribute contains an invalid value, it will use <code>metadata</code>. (Versions of Chrome earlier than 52 treated an invalid value as <code>subtitles</code>.) The following keywords are allowed:
 <ul>
  <li><code>subtitles</code>
   <ul>
    <li>Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.</li>
    <li>Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.</li>
   </ul>
  </li>
  <li><code>captions</code>
   <ul>
    <li>Closed captions provide a transcription and possibly a translation of audio.</li>
    <li>It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).</li>
    <li>Suitable for users who are deaf or when the sound is muted.</li>
   </ul>
  </li>
  <li><code>descriptions</code>
   <ul>
    <li>Textual description of the video content.</li>
    <li>Suitable for users who are blind or where the video cannot be seen.</li>
   </ul>
  </li>
  <li><code>chapters</code>
   <ul>
    <li>Chapter titles are intended to be used when the user is navigating the media resource.</li>
   </ul>
  </li>
  <li><code>metadata</code>
   <ul>
    <li>Tracks used by scripts. Not visible to the user.</li>
   </ul>
  </li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>A user-readable title of the text track which is used by the browser when listing available text tracks.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>Address of the track (<code>.vtt</code> file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the {{HTMLElement("audio")}} or {{HTMLElement("video")}} parent element of the <code>track</code> element has a <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> attribute.</dd>
 <dt>{{htmlattrdef("srclang")}}</dt>
 <dd>Language of the track text data. It must be a valid <a href="https://r12a.github.io/app-subtags/">BCP 47</a> language tag. If the <code>kind</code> attribute is set to <code>subtitles,</code> then <code>srclang</code> must be defined.</dd>
</dl>

<h2 id="Usage_notes">Usage notes</h2>

<p>The type of data that <code> track</code> adds to the media is set in the <code>kind</code> attribute, which can take values of <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> or <code>metadata</code>. The element points to a source file containing timed text that the browser exposes when the user requests additional data.</p>

<p>A <code>media</code> element cannot have more than one <code>track</code> with the same <code>kind</code>, <code>srclang</code>, and <code>label</code>.</p>

<h2 id="Examples">Examples</h2>

<pre class="brush: html">&lt;video controls poster="/images/sample.gif"&gt;
   &lt;source src="sample.mp4" type="video/mp4"&gt;
   &lt;source src="sample.ogv" type="video/ogv"&gt;
   &lt;track kind="captions" src="sampleCaptions.vtt" srclang="en"&gt;
   &lt;track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en"&gt;
   &lt;track kind="chapters" src="sampleChapters.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"&gt;
   &lt;track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"&gt;
   &lt;track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1"&gt;
   &lt;track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2"&gt;
   &lt;track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3"&gt;
   &lt;!-- Fallback --&gt;
   ...
&lt;/video&gt;
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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", "embedded-content-0.html#the-track-element", "track element")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



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

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/HTML/WebVTT">WebVTT text track format</a></li>
</ul>