mozilla

Revision 274443 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: 274443
  • Criado:
  • Autor: Verruckt
  • É revisão atual? Não
  • Comentário 536 words added, 41 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 são suportados os formatos de mídia Ogg Theora, Ogg Vorbis e WAV.

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 controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4">
  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 MPEG-4.

Você pode também especificar quais codecs de mídia o arquivo requere; isto permite ao navegador, tomar decisões cada vez mais inteligentes:

<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>

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.

Se o atributo type 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 source especificados puder ser usado, um evento error é expedido para o elemento video. Se o atributo type é 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.

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étodo load() é 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.

Opções de fallback

O código HTML incluído entre, por exemplo, as tagas <video> e </video> é processado por navegadores que não suportam o elemento media do HTML 5. Você pode tirar vantagem deste fato para proporcionar um fallback de mídia alternativa para estes navegadores.

Esta seção proporciona duas possíveis opções de fallback para vídeo. Em cada caso, se o navegador suportar o elemento video do HTML 5, este será usado; caso contrário, a opção fallback será usada.

Usando Flash

Você pode usar o Flash para tocar um filme em formato Flash se o elemento video não for suportado:

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>

Note que você não inclui class ou id na tag object para que seja compatível com outros navegadores além do Internet Explorer.

Tocando vídeos Ogg usando um miniaplicativo Java

Aqui está um miniaplicativo Java chamado Cortado que você pode usar como fallback para tocar vídeos Ogg em navegadores que tenham suporte a Java, mas não ao elemento video do HTML 5:

<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>

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 são suportados os formatos de mídia Ogg Theora, Ogg Vorbis e WAV.</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 controls&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt;
  &lt;source src="foo.mp4"&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 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">&lt;video controls&gt;
  &lt;source src="foo.ogg" type="video/ogg; codecs=&amp;quot;dirac, speex&amp;quot;"&gt;
  Your browser does not support the &lt;code&gt;video&lt;/code&gt; element.
&lt;/video&gt;</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>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 <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>Opções de fallback</h2>
<p>O código HTML incluído entre, por exemplo, as tagas <code>&lt;video&gt;</code> e <code>&lt;/video&gt;</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>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">&lt;video src="video.ogv" controls&gt;
    &lt;object data="flvplayer.swf" type="application/x-shockwave-flash"&gt;
      &lt;param value="flvplayer.swf" name="movie"/&gt;
    &lt;/object&gt;
&lt;/video&gt;
</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>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">&lt;video src="my_ogg_video.ogg" controls width="320" height="240"&gt;
  &lt;object type="application/x-java-applet"
          width="320" height="240"&gt;
     &lt;param name="archive" value="cortado.jar"&gt;
     &lt;param name="code" value="com.fluendo.player.Cortado.class"&gt;
     &lt;param name="url" value="my_ogg_video.ogg"&gt;
  &lt;/object&gt;
&lt;/video&gt;
</pre>
<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") }} (EN)</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>
Reverter para esta revisão