1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: '<track>: El elemento para pistas de texto incrustado'
slug: Web/HTML/Elemento/track
tags:
- Accessibility
- Contenido HTML insertado
- Elemento
- HTML
- HTML5
- Multimedia
- Pistas de texto
- Reference
- Web
- a11y
- anotaciones
- track
translation_of: Web/HTML/Element/track
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary">El <strong>elmento HTML <code><track></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"><video controls poster="/imagenes/ejemplo.gif">
<source src="ejemplo.mp4" type="video/mp4">
<source src="ejemplo.ogv" type="video/ogv">
<track kind="captions" src="captionsDeEjemplo.vtt" srclang="en">
<track kind="descriptions" src="descripciónDeEjemplo.vtt" srclang="en">
<track kind="chapters" src="capítulosDeEjemplo.vtt" srclang="en">
<track kind="subtitles" src="subtítulosDeEjemplo_de.vtt" srclang="de">
<track kind="subtitles" src="subtítulosDeEjemplo_en.vtt" srclang="en">
<track kind="subtitles" src="subtítulosDeEjemplo_ja.vtt" srclang="ja">
<track kind="subtitles" src="subtítulosDeEjemplo_oz.vtt" srclang="oz">
<track kind="metadata" src="etapaClave1.vtt" srclang="en"
label="Etapa clave 1">
<track kind="metadata" src="etapaClave2.vtt" srclang="en"
label="Etapa clave 2">
<track kind="metadata" src="etapaClave3.vtt" srclang="en"
label="Etapa clave 3">
<!-- Fallback -->
...
</video>
</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>
|
