mozilla

Revision 274442 of Usando_áudio_e_vídeo_no_Firefox

  • Slug da revisão: Usando_áudio_e_vídeo_no_Firefox
  • Título da revisão: Usando áudio e vídeo no Firefox
  • ID da revisão: 274442
  • Criado:
  • Autor: Verruckt
  • É revisão atual? Não
  • Comentário 428 words added, 439 words removed

Conteúdo da revisão

{{ gecko_minversion_header("1.9.1") }}

O Firefox 3.5 introduz suporte para os elementos audio e video do HTML 5, oferecendo a capacidade de facilmente embutir mídia em documentos HTML. Atualmente, somente os formatos de mídia OGG e WAV são suportados, mas o suporte a outros formatos é esperado no futuro.

Embutindo mídia

Embutir mídia no seu documento HTML é simples:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
  Your browser does not support the <code>video</code> element.
</video>

Este exemplo roda um video de amostra do web site Theora, por exemplo.

Múltiplos arquivos fonte podem ser especificados usando o elemento source a fim de proporcionar vídeo/áudio codificados em diferentes formatos para diferentes navegadores. Por exemplo:

<video autoplay>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mov">
  Your browser does not support the <code>video</code> element.
</video>

tocará um arquivo OGG em navegadores que suportem o formato Ogg. Se o navegador não suportar OGG, ele tentará usar o arquivo MOV.

Nota: O elemente source ainda não é completamente suportado pelo Firefox. Veja {{ bug("449363") }} para detalhes.

Controlando a reprodução de mídia

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:

var v = document.getElementsByTagName("video")[0];
v.play();

A primeira linha busca o elemento video no documento e a segundo chama o método play() do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }} que é usada para implementar elementos de mídia.

Eventos de mídia

Diversos eventos são enviados durante o manuseio de mídia:

Nome do evento Descrição
abort Enviado quando a reprodução é abortada; por exemplo, se a mídia estiver tocando e for reiniciada, este evento é enviado.
canplay Enviado quando há dados suficientes disponíveis para que a mídia seja tocada, ao menos por alguns quadros. Corresponde ao CAN_PLAY readyState.
canplaythrough Enviado quando o estado pronto muda para CAN_PLAY_THROUGH, 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.
canshowcurrentframe O quadro atual carregou e pode ser apresentado. Isto corresponde ao CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Enviado quando o estado pronto muda para DATA_UNAVAILABLE.
durationchange 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.
emptied A mídia torna-se vazia; por exemplo, este evento é enviado se a mídia já foi carregada (ou parcialmente carregada), e o métodoload() é chamado para recarregar isto.
empty Enviado quando um erro ocorre e a mídia está vazia.
ended Enviado quando a reprodução termina.
error Enviado quando um erro ocorre. O atributo error do elemento contém mais informações.
load A mídia foi completamente obtida.
loadedfirstframe O primeiro quadro de mídia terminou de carregar.
loadedmetadata Os metadados da mídia terminaram seu carregamento; todos os atributos agora contém toda a informação que poderiam ter.
loadstart Enviado quando o carregamento da mídia inicia.
pause Enviado quando a reprodução é pausada.
play Enviado quando a reprodução começa ou continua.
ratechange Enviado quando a velocidade da reprodução muda.
seeked Enviado quando uma operação solicitada se completa.
seeking Enviado quando uma operação solicitada começa.
timeupdate O tempo indicado pelo atributo currentTime do elemento mudou.
volumechange Enviado quando o volume do áudio muda (tanto quando o volume é configurado, quando o atributo muted é mudado).
waiting Enviado quando a operação requisitada (como a reprodução) é adiada até que se complete outra operação (como uma solicitação).

Você pode facilmente assistir a estes eventos usando o seguinte código:

var v = document.getElementsByTagName("video")[0];

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;

Este exemplo busca o primeiro elemento video no documento e anexa um evento listener a ele, olhando para o evento solicitado, que é enviado sempre que uma operação solicitada é completada. O listener simplesmente pede ao método play() do elemento, que inicia a reprodução.

Então, na linha 4, o exemplo configura o atributo currentTime 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 seeking quando a operação começa, então um evento seeked é expedido quando a solicitação é completada.

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.

Veja também

 {{ 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" } ) }}

Fonte da revisão

<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>O Firefox 3.5 introduz suporte para os elementos <a class="internal" href="/Pt/HTML/Element/Audio" title="Pt/HTML/Element/Audio"><code>audio</code></a> e <a class="internal" href="/Pt/HTML/Element/Video" title="Pt/HTML/Element/Video"><code>video</code></a> do HTML 5, oferecendo a capacidade de facilmente embutir mídia em documentos HTML. Atualmente, somente os formatos de mídia OGG e WAV são suportados, mas o suporte a outros formatos é esperado no futuro.</p>
<h2>Embutindo mídia</h2>
<p>Embutir mídia no seu documento HTML é simples:</p>
<pre class="brush: html">&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay&gt;
  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
&lt;/video&gt;
</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> a fim de proporcionar vídeo/áudio codificados em diferentes formatos para diferentes navegadores. Por exemplo:</p>
<pre class="brush: html">&lt;video autoplay&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt;
  &lt;source src="foo.mov"&gt;
  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
&lt;/video&gt;
</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 MOV.</p>
<div class="note"><strong>Nota: </strong> O elemente source ainda não é completamente suportado pelo Firefox. Veja {{ bug("449363") }} para detalhes.</div>
<h2>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>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<span style="font-family: monospace;"><a class="internal" href="/En/nsIDOMMediaHTMLElement#load()" title="En/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> é chamado para recarregar isto.</span></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>Veja também</h2>
<ul> <li><a class="internal" href="/Pt/HTML/Element/Audio" title="Pt/HTML/Element/Audio"><code>audio</code></a></li> <li><a class="internal" href="/Pt/HTML/Element/Video" title="Pt/HTML/Element/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>
</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>
Reverter para esta revisão