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
|
---
title: 'HTMLMediaElement: loadeddata event'
slug: Web/API/HTMLMediaElement/loadeddata_event
tags:
- Audio
- HTMLMediaElement
- Referências
- Video
- eventos
translation_of: Web/API/HTMLMediaElement/loadeddata_event
---
<p>{{APIRef("HTMLMediaElement")}}</p>
<p><span class="seoSummary">El evento <strong><code>loadeddata</code></strong> se arroja cuando el cuadro en la posición de reproducción actual del medio ha terminado de cargarse; a menudo el primer marco</span></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">Objetivo</th>
<td>Element</td>
</tr>
<tr>
<th scope="row">Acción por defecto</th>
<td>Ninguno</td>
</tr>
<tr>
<th scope="row">Propiedad del controlador de eventos</th>
<td>{{domxref("GlobalEventHandlers.onloadeddata")}}</td>
</tr>
<tr>
<th scope="row">Especificación</th>
<td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
</tr>
</tbody>
</table>
<div class="note">
<p>Tenga en cuenta que este evento no se activará en dispositivos móviles / tablet, si el protector de datos está activado en configuración del navegador.</p>
</div>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Estos ejemplos agregan un escucha de eventos para el evento de <code>loadeddata</code> del HTMLMediaElement, luego publican un mensaje cuando ese controlador de eventos ha respondido al disparo del evento.</p>
<p>Utilizando <code>addEventListener()</code>:</p>
<pre class="brush: js">const video = document.querySelector('video');
video.addEventListener('loadeddata', (event) => {
console.log('Hurra! El readyState solo aumentó a ' +
'HAVE_CURRENT_DATA or mayor por primera vez.');
});</pre>
<p>Utilizando el <code>onloadeddata</code> propiedad del controlador de eventos:</p>
<pre class="brush: js">const video = document.querySelector('video');
video.onloadeddata = (event) => {
console.log('Hurra! El readyState solo aumentó a ' +
'HAVE_CURRENT_DATA or mayor por primera vez.');
};</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificaciones</th>
<th scope="col">Estado</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "media.html#event-media-loadeddata", "loadeddata media event")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadeddata", "loadeddata media event")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div>
<p>{{Compat("api.HTMLMediaElement.loadeddata_event")}}</p>
<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
<ul>
<li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing event')}}</li>
<li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting event')}}</li>
<li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking event')}}</li>
<li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked event')}}</li>
<li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended event')}}</li>
<li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata event')}}</li>
<li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata event')}}</li>
<li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay event')}}</li>
<li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough event')}}</li>
<li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange event')}}</li>
<li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate event')}}</li>
<li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play event')}}</li>
<li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause event')}}</li>
<li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange event')}}</li>
<li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange event')}}</li>
<li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend event')}}</li>
<li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied event')}}</li>
<li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled event')}}</li>
</ul>
<h2 id="Ver_También">Ver También</h2>
<ul>
<li>{{domxref("HTMLAudioElement")}}</li>
<li>{{domxref("HTMLVideoElement")}}</li>
<li>{{HTMLElement("audio")}}</li>
<li>{{HTMLElement("video")}}</li>
</ul>
|
