mozilla

Comparar revisões

Usando_áudio_e_vídeo_no_Firefox

Change Revisions

Revisão 274445:

Revisão 274445 por Leandro Mercês Xavier a

Revisão 222362:

Revisão 222362 por Leandro Mercês Xavier a

Título:
Usando_áudio_e_vídeo_no_Firefox
Usando áudio e vídeo no Firefox
Slug:
Usando_áudio_e_vídeo_no_Firefox
Usando_áudio_e_vídeo_no_Firefox
Conteúdo:

Revisão 274445
Revisão 222362
t7    <p>t
8      {{ gecko_minversion_header("1.9.1") }}
9    </p>
10    <p>
11      O&nbsp;Firefox 3.5 introduz suporte para os elementos <a cl
>ass="internal" href="/Pt/HTML/Elemento/Audio" title="Pt/HTML/Elem 
>ento/Audio"><span class="internal"><code>audio</code></span></a>  
>e <a class="internal" href="/Pt/HTML/Elemento/Video" title="Pt/HT 
>ML/Elemento/Video"><code>video</code></a> do HTML&nbsp;5, oferece 
>ndo a capacidade de facilmente embutir mídia em documentos HTML.  
>Atualmente são suportados os formatos de mídia&nbsp;Ogg&nbsp;Theo 
>ra, Ogg&nbsp;Vorbis e WAV. 
12    </p>
13    <h2 id="Embutindo_m.C3.ADdia">
14      Embutindo mídia
15    </h2>
16    <p>
17      Embutir mídia no seu documento HTML&nbsp;é simples:
18    </p>
19    <pre class="brush: html">
20&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" aut
>oplay&gt; 
21  Your browser does not support the &lt;code&gt;video&lt;/code&gt
>; element. 
22&lt;/video&gt;
23</pre>
24    <p>
25      Este exemplo roda um video de amostra do web site Theora, p
>or exemplo. 
26    </p>
27    <p>
28      Múltiplos arquivos fonte podem ser especificados usando o e
>lemento <a class="internal" href="/En/HTML/Element/Source" title= 
>"En/HTML/Element/Source"><code>source</code></a> (en) a fim de pr 
>oporcionar vídeo/áudio codificados em diferentes formatos para di 
>ferentes navegadores. Por exemplo: 
29    </p>
30    <pre class="brush: html">
31&lt;video controls&gt;
32  &lt;source src="foo.ogg" type="video/ogg"&gt;
33  &lt;source src="foo.mp4"&gt;
34  Your browser does not support the &lt;code&gt;video&lt;/code&gt
>; element. 
35&lt;/video&gt;
36</pre>
37    <p>
38      tocará um arquivo Ogg em navegadores que suportem o formato
> Ogg. Se o navegador não suportar Ogg, ele tentará usar o arquivo 
> MPEG-4. 
39    </p>
40    <p>
41      Você pode também especificar quais codecs de mídia o arquiv
>o requere; isto permite ao navegador, tomar decisões cada vez mai 
>s inteligentes: 
42    </p>
43    <pre class="brush: html">
44&lt;video controls&gt;
45  &lt;source src="foo.ogg" type="video/ogg; codecs=&amp;quot;dira
>c, speex&amp;quot;"&gt; 
46  Your browser does not support the &lt;code&gt;video&lt;/code&gt
>; element. 
47&lt;/video&gt;
48</pre>
49    <p>
50      Aqui nós especificamos que o vídeo usa os codecs Dirac e Sp
>eex.&nbsp;Se o navegador suportar Ogg, mas não os codecs especifi 
>cados, o vídeo não será carregado. 
51    </p>
52    <p>
53      Se o atributo <code>type</code> não for especificado, o tip
>o da mídia é obtido pelo servidor e checado para ver se o Gecko p 
>ode lidar com ele; se ele não puder ser renderizado, a próxima fo 
>nte é checada. Se nenhum dos elementos <span style="font-family:  
>monospace;">source</span> especificados puder ser usado, um event 
>o <code>error</code> é expedido para o elemento <code>video</code 
>>. Se o atributo <code>type</code> é especificado, ele é comparad 
>o com os tipos que o&nbsp;Gecko pode tocar, e se não for reconhec 
>ido, o servidor não é nem mesmo requisitado; ao invés disso, a pr 
>óxima fonte é checada uma vez. 
54    </p>
55    <h2 id="Controlando_a_reprodu.C3.A7.C3.A3o_de_m.C3.ADdia">
56      Controlando a reprodução de mídia
57    </h2>
58    <p>
59      Uma vez que você tenha adicionado mídia no seu documento HT
>ML, usando os novos elementos, você pode controlá-la programatica 
>mente através do seu código JavaScript. Por exemplo, para começar 
> (ou recomeçar) uma reprodução, você pode fazer isto: 
60    </p>
61    <pre class="brush: js">
62var v = document.getElementsByTagName("video")[0];
63v.play();
64</pre>
65    <p>
66      A primeira linha busca o elemento video no documento e a se
>gundo chama o método <a class="external" href="/En/NsIDOMHTMLMedi 
>aElement#play()" title="https://developer.mozilla.org/editor/fcke 
>ditor/core/editor/En/NsIDOMHTMLMediaElement#play()"><code>play()< 
>/code></a> do elemento, como definido na interface {{ interface(" 
>nsIDOMHTMLMediaElement") }} que é usada para implementar elemento 
>s de mídia. 
67    </p>
68    <h2 id="Eventos_de_m.C3.ADdia">
69      Eventos de mídia
70    </h2>
71    <p>
72      Diversos eventos são enviados durante o manuseio de mídia:
73    </p>
74    <table class="standard-table">
75      <tbody>
76        <tr>
77          <td class="header">
78            Nome do evento
79          </td>
80          <td class="header">
81            Descrição
82          </td>
83        </tr>
84        <tr>
85          <td>
86            <code>abort</code>
87          </td>
88          <td>
89            Enviado quando a reprodução é abortada; por exemplo, 
>se a mídia estiver tocando e for reiniciada, este evento é enviad 
>o. 
90          </td>
91        </tr>
92        <tr>
93          <td>
94            <code>canplay</code>
95          </td>
96          <td>
97            Enviado quando há dados suficientes disponíveis para 
>que a mídia seja tocada, ao menos por alguns quadros. Corresponde 
> ao <code>CAN_PLAY</code>&nbsp;<code>readyState</code>. 
98          </td>
99        </tr>
100        <tr>
101          <td>
102            <code>canplaythrough</code>
103          </td>
104          <td>
105            Enviado quando o estado pronto muda para <code>CAN_PL
>AY_THROUGH</code>, indicando que a mídia inteira pode ser tocada  
>sem interrupção, assumindo que a taxa de download permaneça ao me 
>nos no nível atual. 
106          </td>
107        </tr>
108        <tr>
109          <td>
110            <code>canshowcurrentframe</code>
111          </td>
112          <td>
113            O quadro atual carregou e pode ser apresentado. Isto 
>corresponde ao <code>CAN_SHOW_CURRENT_FRAME</code>&nbsp;<code>rea 
>dyState</code>. 
114          </td>
115        </tr>
116        <tr>
117          <td>
118            <code>dataunavailable</code>
119          </td>
120          <td>
121            Enviado quando o estado pronto muda para <code>DATA_U
>NAVAILABLE</code>. 
122          </td>
123        </tr>
124        <tr>
125          <td>
126            <code>durationchange</code>
127          </td>
128          <td>
129            Os metadados foram carregados ou modificados, indican
>do uma mudança na duração da mídia. Isto é enviado, por exemplo,  
>quando a mídia carregou o suficiente para se saber a sua duração. 
130          </td>
131        </tr>
132        <tr>
133          <td>
134            <code>emptied</code>
135          </td>
136          <td>
137            A&nbsp;mídia torna-se vazia; por exemplo, este evento
> é enviado se a mídia já foi carregada (ou parcialmente carregada 
>), e o método <a class="internal" href="/En/nsIDOMMediaHTMLElemen 
>t#load()" title="En/nsIDOMMediaHTMLElement#load()"><code>load()</ 
>code></a> é chamado para recarregar isto. 
138          </td>
139        </tr>
140        <tr>
141          <td>
142            <code>empty</code>
143          </td>
144          <td>
145            Enviado quando um erro ocorre e a mídia está vazia.
146          </td>
147        </tr>
148        <tr>
149          <td>
150            <code>ended</code>
151          </td>
152          <td>
153            Enviado quando a reprodução termina.
154          </td>
155        </tr>
156        <tr>
157          <td>
158            <code>error</code>
159          </td>
160          <td>
161            Enviado quando um erro ocorre. O atributo <code>error
></code> do elemento contém mais informações. 
162          </td>
163        </tr>
164        <tr>
165          <td>
166            <code>load</code>
167          </td>
168          <td>
169            A mídia foi completamente obtida.
170          </td>
171        </tr>
172        <tr>
173          <td>
174            <code>loadedfirstframe</code>
175          </td>
176          <td>
177            O&nbsp;primeiro quadro de mídia terminou de carregar.
178          </td>
179        </tr>
180        <tr>
181          <td>
182            <code>loadedmetadata</code>
183          </td>
184          <td>
185            Os metadados da mídia terminaram seu carregamento; to
>dos os atributos agora contém toda a informação que poderiam ter. 
186          </td>
187        </tr>
188        <tr>
189          <td>
190            <code>loadstart</code>
191          </td>
192          <td>
193            Enviado quando o carregamento da mídia inicia.
194          </td>
195        </tr>
196        <tr>
197          <td>
198            <code>pause</code>
199          </td>
200          <td>
201            Enviado quando a reprodução é pausada.
202          </td>
203        </tr>
204        <tr>
205          <td>
206            <code>play</code>
207          </td>
208          <td>
209            Enviado quando a reprodução começa ou continua.
210          </td>
211        </tr>
212        <tr>
213          <td>
214            <code>ratechange</code>
215          </td>
216          <td>
217            Enviado quando a velocidade da reprodução muda.
218          </td>
219        </tr>
220        <tr>
221          <td>
222            <code>seeked</code>
223          </td>
224          <td>
225            Enviado quando uma operação solicitada se completa.
226          </td>
227        </tr>
228        <tr>
229          <td>
230            <code>seeking</code>
231          </td>
232          <td>
233            Enviado quando uma operação solicitada começa.
234          </td>
235        </tr>
236        <tr>
237          <td>
238            <code>timeupdate</code>
239          </td>
240          <td>
241            O tempo indicado pelo atributo <code>currentTime</cod
>e> do elemento mudou. 
242          </td>
243        </tr>
244        <tr>
245          <td>
246            <code>volumechange</code>
247          </td>
248          <td>
249            Enviado quando o volume do áudio muda (tanto quando o
> volume é configurado, quando o atributo <code>muted</code> é mud 
>ado). 
250          </td>
251        </tr>
252        <tr>
253          <td>
254            <code>waiting</code>
255          </td>
256          <td>
257            Enviado quando a operação requisitada (como a reprodu
>ção) é adiada até que se complete outra operação&nbsp;(como uma s 
>olicitação). 
258          </td>
259        </tr>
260      </tbody>
261    </table>
262    <p>
263      Você pode facilmente assistir a estes eventos usando o segu
>inte código: 
264    </p>
265    <pre>
266var v = document.getElementsByTagName("video")[0];
267 
268v.addEventListener("seeked", function() { document.getElementsByT
>agName("video")[0].play(); }, true); 
269v.currentTime = 10.0;
270</pre>
271    <p>
272      Este exemplo busca o primeiro elemento video no documento e
> anexa um evento <strong>listener</strong> a ele, olhando para o  
>evento solicitado, que é enviado sempre que uma operação solicita 
>da é completada. O <strong>listener</strong> simplesmente pede ao 
> método <code>play()</code> do elemento, que inicia a reprodução. 
273    </p>
274    <p>
275      Então, na linha 4, o exemplo configura o atributo <code>cur
>rentTime</code> do elemento para 10.0, o que inicia uma operação  
>de solicitação até a marca de 10 segundos na mídia. Isto causa o  
>envio de um evento <code>seeking</code> quando a operação começa, 
> então um evento <code>seeked</code> é expedido quando a solicita 
>ção é completada. 
276    </p>
277    <p>
278      Em outras palavras, este exemplo solicita até os 10 segundo
>s da marca na mídia, e então começa a reprodução assim que a soli 
>citação é finalizada. 
279    </p>
280    <h2 id="Op.C3.A7.C3.B5es_de_fallback">
281      Opções de fallback
282    </h2>
283    <p>
284      O código HTML incluído entre, por exemplo, as tagas <code>&
>lt;video&gt;</code> e <code>&lt;/video&gt;</code> é processado po 
>r navegadores que não suportam o elemento <code>media</code> do H 
>TML 5.&nbsp;Você pode tirar vantagem deste fato para proporcionar 
> um <strong>fallback</strong> de mídia alternativa para estes nav 
>egadores. 
285    </p>
286    <p>
287      Esta seção proporciona duas possíveis opções de <strong>fal
>lback</strong> para vídeo. Em cada caso, se o navegador suportar  
>o elemento <code>video</code> do HTML 5, este será usado; caso co 
>ntrário, a opção <strong>fallback</strong> será usada. 
288    </p>
289    <h3 id="Usando_Flash">
290      Usando Flash
291    </h3>
292    <p>
293      Você pode usar o Flash para tocar um filme em formato Flash
> se o elemento <code>video</code> não for suportado: 
294    </p>
295    <pre class="brush: html">
296&lt;video src="video.ogv" controls&gt;
297    &lt;object data="flvplayer.swf" type="application/x-shockwave
>-flash"&gt; 
298      &lt;param value="flvplayer.swf" name="movie"/&gt;
299    &lt;/object&gt;
300&lt;/video&gt;
301</pre>
302    <p>
303      Note que você não inclui <code>class</code> ou <code>id</co
>de> na tag <code>object</code> para que seja compatível com outro 
>s navegadores além do Internet Explorer. 
304    </p>
305    <h3 id="Tocando_v.C3.ADdeos_Ogg_usando_um_miniaplicativo_Java
>"> 
306      Tocando vídeos Ogg usando um miniaplicativo Java
307    </h3>
308    <p>
309      Aqui está um miniaplicativo Java chamado <a class="external
>" href="http://maikmerten.livejournal.com/2256.html" title="http: 
>//maikmerten.livejournal.com/2256.html">Cortado</a> que você pode 
> usar como <strong>fallback</strong> para tocar vídeos Ogg em nav 
>egadores que tenham suporte a Java, mas não ao elemento <code>vid 
>eo do HTML 5<span style="font-family: Verdana,Tahoma,sans-serif;" 
>>:</span></code> 
310    </p>
311    <pre class="brush: html">
312&lt;video src="my_ogg_video.ogg" controls width="320" height="240
>"&gt; 
313  &lt;object type="application/x-java-applet"
314          width="320" height="240"&gt;
315     &lt;param name="archive" value="cortado.jar"&gt;
316     &lt;param name="code" value="com.fluendo.player.Cortado.clas
>s"&gt; 
317     &lt;param name="url" value="my_ogg_video.ogg"&gt;
318  &lt;/object&gt;
319&lt;/video&gt;
320</pre>
321    <h2 id="Veja_tamb.C3.A9m">
322      Veja também
323    </h2>
324    <ul>
325      <li>
326        <a class="internal" href="/Pt/HTML/Elemento/Audio" title=
>"Pt/HTML/Elemento/Audio"><code>audio</code></a> 
327      </li>
328      <li>
329        <a class="internal" href="/Pt/HTML/Elemento/Video" title=
>"Pt/HTML/Elemento/Video"><code>video</code></a> 
330      </li>
331      <li>
332        <a class="internal" href="/En/HTML/Element/Source" title=
>"En/HTML/Element/Source"><code>source</code></a> (EN) 
333      </li>
334      <li>
335        <a class="internal" href="/En/Manipulating_video_using_ca
>nvas" title="En/Manipulating video using canvas">Manipulating vid 
>eo using canvas</a> (EN) 
336      </li>
337      <li>{{ interface("nsIDOMHTMLMediaElement") }}
338      </li>
339      <li>
340        <a class="internal" href="/En/Media_formats_supported_by_
>the_audio_and_video_elements" title="En/Media formats supported b 
>y the audio and video elements">Media formats supported by the au 
>dio and video elements</a> (EN) 
341      </li>
342    </ul>
343    <p>
344      &nbsp;{{ languages( { "en": "en/Using audio and video in Fi
>refox", "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es 
>": "es/Etiquetas audio y video en Firefox" } ) }} 
345    </p>

Voltar ao Histórico