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
|
---
title: Usando_áudio_e_vídeo_no_Firefox
slug: Usando_áudio_e_vídeo_no_Firefox
---
<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>O Firefox 3.5 introduz suporte para os elementos <a class="internal" href="/Pt/HTML/Elemento/Audio" title="Pt/HTML/Elemento/Audio"><span class="internal"><code>audio</code></span></a> e <a class="internal" href="/Pt/HTML/Elemento/Video" title="Pt/HTML/Elemento/Video"><code>video</code></a> do HTML 5, oferecendo a capacidade de facilmente embutir mídia em documentos HTML. Atualmente são suportados os formatos de mídia Ogg Theora, Ogg Vorbis e WAV.</p>
<h2 id="Embutindo_mídia">Embutindo mídia</h2>
<p>Embutir mídia no seu documento HTML é simples:</p>
<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
Your browser does not support the <code>video</code> element.
</video>
</pre>
<p>Este exemplo roda um video de amostra do web site Theora, por exemplo.</p>
<p>Múltiplos arquivos fonte podem ser especificados usando o elemento <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> (en) a fim de proporcionar vídeo/áudio codificados em diferentes formatos para diferentes navegadores. Por exemplo:</p>
<pre class="brush: html"><video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
Your browser does not support the <code>video</code> element.
</video>
</pre>
<p>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.</p>
<p>Você pode também especificar quais codecs de mídia o arquivo requere; isto permite ao navegador, tomar decisões cada vez mais inteligentes:</p>
<pre class="brush: html"><video controls>
<source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">
Your browser does not support the <code>video</code> element.
</video></pre>
<p>Aqui nós especificamos que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não os codecs especificados, o vídeo não será carregado.</p>
<p>Se o atributo <code>type</code> não for especificado, o tipo da mídia é obtido pelo servidor e checado para ver se o Gecko pode lidar com ele; se ele não puder ser renderizado, a próxima fonte é checada. Se nenhum dos elementos <span style="font-family: monospace;">source</span> especificados puder ser usado, um evento <code>error</code> é expedido para o elemento <code>video</code>. Se o atributo <code>type</code> é especificado, ele é comparado com os tipos que o Gecko pode tocar, e se não for reconhecido, o servidor não é nem mesmo requisitado; ao invés disso, a próxima fonte é checada uma vez.</p>
<h2 id="Controlando_a_reprodução_de_mídia">Controlando a reprodução de mídia</h2>
<p>Uma vez que você tenha adicionado mídia no seu documento HTML, usando os novos elementos, você pode controlá-la programaticamente através do seu código JavaScript. Por exemplo, para começar (ou recomeçar) uma reprodução, você pode fazer isto:</p>
<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
v.play();
</pre>
<p>A primeira linha busca o elemento video no documento e a segundo chama o método <a class="external" href="/En/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/En/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }} que é usada para implementar elementos de mídia.</p>
<h2 id="Eventos_de_mídia">Eventos de mídia</h2>
<p>Diversos eventos são enviados durante o manuseio de mídia:</p>
<table class="standard-table"> <tbody> <tr> <td class="header">Nome do evento</td> <td class="header">Descrição</td> </tr> <tr> <td><code>abort</code></td> <td>Enviado quando a reprodução é abortada; por exemplo, se a mídia estiver tocando e for reiniciada, este evento é enviado.</td> </tr> <tr> <td><code>canplay</code></td> <td>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> <code>readyState</code>.</td> </tr> <tr> <td><code>canplaythrough</code></td> <td>Enviado quando o estado pronto muda para <code>CAN_PLAY_THROUGH</code>, indicando que a mídia inteira pode ser tocada sem interrupção, assumindo que a taxa de download permaneça ao menos no nível atual.</td> </tr> <tr> <td><code>canshowcurrentframe</code></td> <td>O quadro atual carregou e pode ser apresentado. Isto corresponde ao <code>CAN_SHOW_CURRENT_FRAME</code> <code>readyState</code>.</td> </tr> <tr> <td><code>dataunavailable</code></td> <td>Enviado quando o estado pronto muda para <code>DATA_UNAVAILABLE</code>.</td> </tr> <tr> <td><code>durationchange</code></td> <td>Os metadados foram carregados ou modificados, indicando 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.</td> </tr> <tr> <td><code>emptied</code></td> <td>A 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/nsIDOMMediaHTMLElement#load()" title="En/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> é chamado para recarregar isto.</td> </tr> <tr> <td><code>empty</code></td> <td>Enviado quando um erro ocorre e a mídia está vazia.</td> </tr> <tr> <td><code>ended</code></td> <td>Enviado quando a reprodução termina.</td> </tr> <tr> <td><code>error</code></td> <td>Enviado quando um erro ocorre. O atributo <code>error</code> do elemento contém mais informações.</td> </tr> <tr> <td><code>load</code></td> <td>A mídia foi completamente obtida.</td> </tr> <tr> <td><code>loadedfirstframe</code></td> <td>O primeiro quadro de mídia terminou de carregar.</td> </tr> <tr> <td><code>loadedmetadata</code></td> <td>Os metadados da mídia terminaram seu carregamento; todos os atributos agora contém toda a informação que poderiam ter.</td> </tr> <tr> <td><code>loadstart</code></td> <td>Enviado quando o carregamento da mídia inicia.</td> </tr> <tr> <td><code>pause</code></td> <td>Enviado quando a reprodução é pausada.</td> </tr> <tr> <td><code>play</code></td> <td>Enviado quando a reprodução começa ou continua.</td> </tr> <tr> <td><code>ratechange</code></td> <td>Enviado quando a velocidade da reprodução muda.</td> </tr> <tr> <td><code>seeked</code></td> <td>Enviado quando uma operação solicitada se completa.</td> </tr> <tr> <td><code>seeking</code></td> <td>Enviado quando uma operação solicitada começa.</td> </tr> <tr> <td><code>timeupdate</code></td> <td>O tempo indicado pelo atributo <code>currentTime</code> do elemento mudou.</td> </tr> <tr> <td><code>volumechange</code></td> <td>Enviado quando o volume do áudio muda (tanto quando o volume é configurado, quando o atributo <code>muted</code> é mudado).</td> </tr> <tr> <td><code>waiting</code></td> <td>Enviado quando a operação requisitada (como a reprodução) é adiada até que se complete outra operação (como uma solicitação).</td> </tr> </tbody>
</table>
<p>Você pode facilmente assistir a estes eventos usando o seguinte código:</p>
<pre>var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
</pre>
<p>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 solicitada é completada. O <strong>listener</strong> simplesmente pede ao método <code>play()</code> do elemento, que inicia a reprodução.</p>
<p>Então, na linha 4, o exemplo configura o atributo <code>currentTime</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.</p>
<p>Em outras palavras, este exemplo solicita até os 10 segundos da marca na mídia, e então começa a reprodução assim que a solicitação é finalizada.</p>
<h2 id="Opções_de_fallback">Opções de fallback</h2>
<p>O código HTML incluído entre, por exemplo, as tagas <code><video></code> e <code></video></code> é processado por navegadores que não suportam o elemento <code>media</code> do HTML 5. Você pode tirar vantagem deste fato para proporcionar um <strong>fallback</strong> de mídia alternativa para estes navegadores.</p>
<p>Esta seção proporciona duas possíveis opções de <strong>fallback</strong> para vídeo. Em cada caso, se o navegador suportar o elemento <code>video</code> do HTML 5, este será usado; caso contrário, a opção <strong>fallback</strong> será usada.</p>
<h3 id="Usando_Flash">Usando Flash</h3>
<p>Você pode usar o Flash para tocar um filme em formato Flash se o elemento <code>video</code> não for suportado:</p>
<pre class="brush: html"><video src="video.ogv" controls>
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
</pre>
<p>Note que você não inclui <code>class</code> ou<code> id</code> na tag <code>object</code> para que seja compatível com outros navegadores além do Internet Explorer.</p>
<h3 id="Tocando_vídeos_Ogg_usando_um_miniaplicativo_Java">Tocando vídeos Ogg usando um miniaplicativo Java</h3>
<p>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 navegadores que tenham suporte a Java, mas não ao elemento <code>video do HTML 5<span style="font-family: Verdana,Tahoma,sans-serif;">:</span></code></p>
<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240">
<object type="application/x-java-applet"
width="320" height="240">
<param name="archive" value="cortado.jar">
<param name="code" value="com.fluendo.player.Cortado.class">
<param name="url" value="my_ogg_video.ogg">
</object>
</video>
</pre>
<h2 id="Veja_também">Veja também</h2>
<ul> <li><a class="internal" href="/Pt/HTML/Elemento/Audio" title="Pt/HTML/Elemento/Audio"><code>audio</code></a></li> <li><a class="internal" href="/Pt/HTML/Elemento/Video" title="Pt/HTML/Elemento/Video"><code>video</code></a></li> <li><a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> (EN)</li> <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a> (EN)</li> <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> <li><a class="internal" href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a> (EN)</li>
</ul>
<p> {{ languages( { "en": "en/Using audio and video in Firefox", "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Etiquetas audio y video en Firefox" } ) }}</p>
|
