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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
---
title: Elementos HTML para Video
slug: Web/API/HTMLVideoElement
translation_of: Web/API/HTMLVideoElement
original_slug: Web/API/ElementosHTMLparaVideo
---
<div>
<div>{{APIRef("HTML DOM")}}</div>
</div>
<p>El interfaz de <strong><code>HTMLVideoElement</code></strong> provee propiedades especiales y metodos para manipular objectos de videos. Tambien, este interfaz hereda propiedades y métodos de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.</p>
<p>La lista de <a href="/en-US/docs/HTML/Supported_media_formats">supported media formats</a> (formatos de medios compatibles) varía de un navegador a otro. Debe proveer su video en un formato sencillo que sea compatible con todos los navegadores o proveer varias fuentes de videos in varios formatos, para que así todo navegador que necesite este cubierto.</p>
<p>{{InheritanceDiagram(600, 140)}}</p>
<h2 id="Propiedades">Propiedades</h2>
<p><em>Hereda las propiedades de los interfaces anteriores, {{domxref("HTMLMediaElement")}}, y </em><em>{{domxref("HTMLElement")}}.</em></p>
<dl>
<dt>{{domxref("HTMLVideoElement.height")}}</dt>
<dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("height", "video")}}, el cual especifica la altura del area mostrada, en pixeles CSS.</dd>
<dt>{{domxref("HTMLVideoElement.poster")}}</dt>
<dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("poster", "video")}}, el cual especifica que imagen sera mostrada en la ausencia de data de video.</dd>
<dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
<dd>Devuelve un <code>unsigned long</code> que contiene la altura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso. Si el estado disponible del elemento es <code>HAVE_NOTHING</code>, su valor es <code>0</code>.</dd>
<dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
<dd>Devuelve un <code>unsigned long</code> que contiene la anchura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso. Si el estado disponible del elemento es <code>HAVE_NOTHING</code>, su valor es <code>0</code>.</dd>
<dt>{{domxref("HTMLVideoElement.width")}}</dt>
<dd>Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("width", "video")}}, el cual especifica la anchura del area mostrada, en pixeles CSS.</dd>
</dl>
<h3 id="Propiedades_especificas_para_Gecko">Propiedades especificas para Gecko</h3>
<dl>
<dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
<dd><code>Devuelve un unsigned long</code> con el conteo de marcos de video que han sido analizados del recurso de multimedia.</dd>
<dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
<dd>Devuelve un <code>unsigned long</code> con el conteo de marcos de video que han sido decifrados como imágines.</dd>
<dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
<dd>Devuelve un <code>unsigned long</code> con el conteo de marcos decodificados que han sido presentados a la canalización de render para pintar.</dd>
<dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}</dt>
<dd>Devuelve un <code>unsigned long</code> con el conteo de marcos presentados que han sido pintados en la pantalla.</dd>
<dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}</dt>
<dd>Devuelve un <code>double</code> con el tiempo, en segundos, que el último marco de video fue pintado por retrazo.</dd>
<dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}</dt>
<dd>Devuelve un {{domxref("Boolean")}} indicando si existe algún audio asociado con el video.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<p><em>Hereda los métodos anteriores de </em><em>{{domxref("HTMLMediaElement")}} y </em><em>{{domxref("HTMLElement")}}.</em></p>
<dl>
<dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
<dd>Devuelve un {{domxref("VideoPlaybackQuality")}} para objetos que contienen las medidas de reproducciones actuales.</dd>
</dl>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificacion</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}</td>
<td>{{Spec2("Media Source Extensions")}}</td>
<td>Anadio el metodo <code>getVideoPlaybackQuality()</code> .</td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Sin cambios del {{SpecName('HTML5 W3C')}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Definicion incial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_Navegador">Compatibilidad con Navegador</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Caracteristicas</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Apoyo basico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>9.0</td>
<td>10.50</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay</code> {{non-standard_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("5.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>mozHasAudio</code> {{non-standard_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{ CompatGeckoDesktop("15.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>getVideoPlaybackQuality()</code>{{experimental_inline}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("25.0")}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Características</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Apoyo básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("2.0")}}</td>
<td>9.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay</code> {{non-standard_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("5.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>mozHasAudio</code> {{non-standard_inline}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{ CompatGeckoMobile("15.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td><code>getVideoPlaybackQuality()</code>{{experimental_inline}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("25.0")}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Gecko implementa esto detras de la preferencia <code>media.mediasource.enabled</code>, predispuesto a <code>false</code>.</p>
<h2 id="Lea_Tambien">Lea Tambien</h2>
<ul>
<li>Elemento HTML implementando este interfaz: {{HTMLElement("video")}}.</li>
<li><a class="external" href="http://people.mozilla.org/~cpearce/paint-stats-demo.html">Demonstracion de estadisticas de pintura de video</a></li>
<li><a href="/en-US/docs/HTML/Supported_media_formats">Formatos de medios compatibles </a></li>
</ul>
|
