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
|
---
title: 'TextTrack: evento cuechange'
slug: Web/API/TextTrack/cuechange_event
tags:
- API
- Audio
- Event
- Media
- Reference
- TextTrack
- Video
- WebVTT
- cuechange
- events
- oncuechange
- track
translation_of: Web/API/TextTrack/cuechange_event
---
<div>{{APIRef}}</div>
<p><span class="seoSummary">El evento <strong><code>cuechange</code></strong> se activa cuando un {{domxref("TextTrack")}} ha cambiado las anotaciones que se estan mostrando.</span> El evento es activado tanto en <code>TextTrack</code> <em>y</em> en el {{domxref("HTMLTrackElement")}} donde esta siendo mostrado, si lo hay.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Burbujas</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Interfaz</th>
<td>{{domxref("Event")}}</td>
</tr>
<tr>
<th scope="row">Propiedad del controlador de eventos</th>
<td>{{domxref("GlobalEventHandlers.oncuechange")}}</td>
</tr>
</tbody>
</table>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="En_el_TextTrack">En el TextTrack</h3>
<p>Tu puedes preparar una escucha para el evento <code>cuechange</code> en un <code>TextTrack</code> usando el método {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p>
<pre class="brush: js notranslate">track.addEventListener('cuechange', function () {
let cues = track.activeCues; // array de las anotaciones actuales
});
</pre>
<p>O puedes solo preparar la propiedad del controlador de eventos {{domxref("GlobalEventHandlers.oncuechange", "oncuechange")}}:</p>
<pre class="brush: js notranslate">track.oncuechange = function () {
let cues = track.activeCues; // array of current cues
}</pre>
<h3 id="En_el_elemento_track">En el elemento track</h3>
<p>El subyacente {{domxref("TextTrack")}}, indicado por la propiedad {{domxref("HTMLTrackElement.track", "track")}}, recive un evento {{domxref("TextTrack.cuechange_event", "cuechange")}} cada vez que la anotación que esta siendo actualmente presentada cambia. Est sucede incluso si la pista de texto no está asociada cun un elemento multimedia.</p>
<p>Si la pista de texto <em>está</em> asociada con el elemento multimedia, usando el elemento {{HTMLElement("track")}} como hijo del elemento {{HTMLElement("audio")}} o del elemento {{HTMLElement("video")}}, el evento <code>cuechange</code> es también enviado al {{domxref("HTMLTrackElement")}}.</p>
<pre class="brush: js notranslate">let textTrackElem = document.getElementById("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
</pre>
<p>Además, puedes utilizar el controlador de eventos <code>oncuechange</code>:</p>
<pre class="brush: js notranslate">let textTrackElem = document.getElementById("texttrack");
textTrackElem.oncuechange = (event) => {
let cues = event.target.track.activeCues;
});</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de 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("api.TextTrack.cuechange_event")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>{{glossary("WebVTT")}}</li>
</ul>
|
