path: root/files/ca/web/html/element/track/index.html

---
title: <track>
slug: Web/HTML/Element/track
tags:
  - Element
  - HTML
  - HTML embedded content
  - HTML5
  - Multimedia
  - Reference
  - Web
translation_of: Web/HTML/Element/track
---
<p>L'<strong>element HTML <code>&lt;track&gt;</code></strong> s'utilitza com un fill dels elements de mitjans - {{HTMLElement("audio")}} i {{HTMLElement("video")}}. Se li permet especificar pistes de text temporitzat (o dades basades en el temps), per exemple per gestionar automàticament els subtítols. Les pistes estan formatades en format WebVTT (arxius .vtt) - Web Video Text Tracks.</p>

<p>El tipus de dades que track afegeix al mitjà s'estableix en l'atribut Kind, que pot prendre els valors de <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> o <code>metadata</code>. L'element apunta a un arxiu d'origen que conté text temporitzat que l'explorador exposa quan l'usuari sol·licita dades addicionals.</p>

<p>Un element de mitjans no pot tenir més d'un <code>track</code> amb el mateix <code>kind</code>, <code>srclang</code> i <code>label</code>.</p>

<h2 id="Context_d'ùs">Context d'ùs</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td>Categories de contingut</td>
   <td>Cap</td>
  </tr>
  <tr>
   <td>Contingut permès</td>
   <td>Cap, es un {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <td>Omissió de l'etiqueta</td>
   <td><span id="result_box" lang="ca"><span>Ja</span> <span>que és un</span> <span>element</span> <span>buit,</span> <span>l'etiqueta</span> <span>d'inici</span> <span>ha d'estar present</span> <span>i</span> <span>l'etiqueta</span> <span>final</span> <span>no ha d'estar</span> <span>present.</span></span></td>
  </tr>
  <tr>
   <td>Elements pares permesos</td>
   <td>Un element de mitjans, abans de qualsevol <a href="/en-US/docs/HTML/Content_categories#Flow_content">contingut dinàmic</a>.</td>
  </tr>
  <tr>
   <td>Normativa del document</td>
   <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-track-element" rel="external nofollow">HTML5, secció 4.8.9</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="/en-US/docs/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("default")}}</dt>
 <dd>Aquest atribut indica que la pista ha d'estar habilitada llevat que les preferències de l'usuari indiquin que una altra pista és més apropiada. Això només es pot utilitzar en un element track per cada element de mitjans.</dd>
 <dt>{{htmlattrdef("kind")}}</dt>
 <dd>Com s'utilitza la pista (track) de text. Si s'omet kind, per defecte és <code>subtitles</code>. Si l'atribut no està present, s'utilitzen els <code>subtitles</code>. Si l'atribut conté un valor no vàlid, s'utilitzarà metadata. (Les versions de Chrome anterios a la 52 tracta un valor no vàlid com <code>subtitles</code>.) Es permeten les següents paraules clau:
 <ul>
  <li><code>subtitles</code>
   <ul>
    <li>Subtitles proporciona traducció dels continguts que no poden ser entesos per l'espectador. Per exemple el diàleg o text que no és l'anglès en un pel·lícula de parla anglès.</li>
    <li>Els subtítols poden incloure contingut addicional, en general informació de fons addicional. Per exemple el text en el començament de les pel·lícules de Star Wars, o la data, hora i lloc de l'escena.</li>
   </ul>
  </li>
  <li><code>captions</code>
   <ul>
    <li>Subtítols que proporcionen una transcripció i possiblement una traducció d'àudio.</li>
    <li>Pot incloure informació no verbal important, com ara pistes de música o efectes de so. Es pot indicar la font de la senyal (per exemple, música, text, caràcter).</li>
    <li>Adequat per a usuaris sords o quan el so és silenciat.</li>
   </ul>
  </li>
  <li><code>descriptions</code>
   <ul>
    <li>Descripció textual del contingut del vídeo.</li>
    <li>Adequat per als usuaris que són cecs o que el vídeo no es pot veure.</li>
   </ul>
  </li>
  <li><code>chapters</code>
   <ul>
    <li>Títols dels capítols que estan destinats a ser utilitzats quan l'usuari està navegant per el recurs dels mitjans.</li>
   </ul>
  </li>
  <li><code>metadata</code>
   <ul>
    <li><span id="result_box" lang="ca"><span>Pistes</span> <span>utilitzades pels</span> <span>scripts.</span> <span>No</span> <span>visible per a l'</span><span>usuari.</span></span></li>
   </ul>
  </li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>Un títol llegible per l'usuari de la pista de text que és utilitzada pel navegador quan s'enumeren les pistes de text disponibles.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd><span id="result_box" lang="ca"><span>Direcció</span> <span>de la pista</span> <span>(</span><span>arxiu</span> <code><span>.vtt</span></code><span>)</span><span>.</span> <span>Ha de ser</span> <span>un URL vàlid</span><span>.</span> <span>Aquest</span> <span>atribut</span> <span>s'ha de definir</span><span>.</span></span></dd>
 <dt>{{htmlattrdef("srclang")}}</dt>
 <dd>Idioma de les dades de text de la pista. Ha de ser una etiqueta d'idioma <a href="http://people.w3.org/rishida/utils/subtags/">BCP 47</a> vàlida. Si s'estableix l'atribut <code>kind</code> en els <code>subtitles</code>, llavors <code>srclang</code> ha de ser definit.</dd>
</dl>

<h2 id="Interfície_DOM">Interfície DOM</h2>

<p>Aquest element implementa la interfície {{domxref("HTMLTrackElement")}}.</p>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: html">&lt;video controls <span class="highATT">poster=</span><span class="highVAL">"/images/sample.gif"</span>&gt;
<span class="highLT">   &lt;</span><span class="highELE">source</span> <span class="highATT">src=</span><span class="highVAL">"sample.mp4"</span> <span class="highATT">type=</span><span class="highVAL">"video/mp4"</span><span class="highGT">&gt;</span>
   &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="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "&lt;track&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td>Definció incial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>23</td>
   <td>{{CompatGeckoDesktop(24)}}<sup>[2]</sup></td>
   <td>10</td>
   <td>12.10</td>
   <td>6</td>
  </tr>
  <tr>
   <td>atribut <code>src</code> ajustable</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop(50)}}<sup>[3]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="ca"><span>Valor</span> </span><strong>kind </strong><span class="short_text" lang="ca"><span>no vàlid</span> <span>com</span> </span><code>metadata</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>25<sup>[1]</sup></td>
   <td>{{CompatGeckoMobile(24)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>atribut <code>src</code> ajustable</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(50)}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><span class="short_text" id="result_box" lang="ca"><span>Valor</span> </span><strong>kind </strong><span class="short_text" lang="ca"><span>no vàlid</span> <span>com</span> </span><code>metadata</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1]En Chrome per Android, l'element <code>&lt;track&gt;</code> encara no funciona per vídeo a pantalla completa .</p>

<p>[2] L'element <code>&lt;track&gt;</code>, la interfície {{domxref("HTMLTrackElement")}}, i les API associades es van dur a terme en Firefox 24 darrere de la preferència {{pref("media.webvtt.enabled")}}, està desactivat per defecte . Per habilitar el suport WebVTT, establir aquesta preferència en <code>true</code>. WebVTT està activat per defecte a partir del Firefox 31 i es pot desactivar establint la preferència a <code>false</code>.</p>

<p>[3] Fins a Firefox 50, l'atribut {{htmlattrxref ("src")}}  és configurable, però el canvi no aconsegueix manejar-ho adequadament. A partir de Firefox 50, les dades de pista existents s'eliminen correctament, les noves dades de pista es carreguen i es posen en execució, i així successivament.</p>

<h2 id="Veure">Veure</h2>

<ul>
 <li><a href="/en-US/docs/HTML/WebVTT">Format de la pista de text WebVTT</a></li>
</ul>

<p>{{HTMLRef}}</p>