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: 274441
  • Criado:
  • Autor: Verruckt
  • É revisão atual? Não
  • Comentário 71 words added, 69 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.

Media events

Various events are sent when handling media:

Event name Description
abort Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
canplay Sent when enough data is available that the media can be played, at least for a couple of frames.  This corresponds to the CAN_PLAY readyState.
canplaythrough Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.
canshowcurrentframe The current frame has loaded and can be presented.  This corresponds to the CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Sent when the ready state changes to DATA_UNAVAILABLE.
durationchange The metadata has loaded or changed, indicating a change in duration of the media.  This is sent, for example, when the media has loaded enough that the duration is known.
emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
empty Sent when an error occurs and the media is empty.
ended Sent when playback completes.
error Sent when an error occurs.  The element's error attribute contains more information.
load The media has been completely retrieved.
loadedfirstframe The first frame of the media has finished loading.
loadedmetadata The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.
loadstart Sent when loading of the media begins.
pause Sent when playback is paused.
play Sent when playback starts or resumes.
ratechange Sent when the playback speed changes.
seeked Sent when a seek operation completes.
seeking Sent when a seek operation begins.
timeupdate The time indicated by the element's currentTime attribute has changed.
volumechange Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
waiting Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

You can easily watch for these events, using code such as the following:

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

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

This example fetches the first video element in the document and attaches an event listener to it, watching for the seeked event, which is sent whenever a seek operation completes.  The listener simply calls the element's play() method, which starts playback.

Then, in line 4, the example sets the element's currentTime attribute to 10.0, which initiates a seek operation to the 10-second mark in the media.  This causes a seeking event to be sent when the operation begins, then a seeked event to be dispatched when the seek is completed.

In other words, this example seeks to the 10-second mark in the media, then begins playback as soon as that's finished.

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>Media events</h2>
<p>Various events are sent when handling media:</p>
<table class="standard-table"> <tbody> <tr> <td class="header">Event name</td> <td class="header">Description</td> </tr> <tr> <td><code>abort</code></td> <td>Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.</td> </tr> <tr> <td><code>canplay</code></td> <td>Sent when enough data is available that the media can be played, at least for a couple of frames.  This corresponds to the <code>CAN_PLAY</code> <code>readyState</code>.</td> </tr> <tr> <td><code>canplaythrough</code></td> <td>Sent when the ready state changes to <code>CAN_PLAY_THROUGH</code>, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.</td> </tr> <tr> <td><code>canshowcurrentframe</code></td> <td>The current frame has loaded and can be presented.  This corresponds to the <code>CAN_SHOW_CURRENT_FRAME</code> <code>readyState</code>.</td> </tr> <tr> <td><code>dataunavailable</code></td> <td>Sent when the ready state changes to <code>DATA_UNAVAILABLE</code>.</td> </tr> <tr> <td><code>durationchange</code></td> <td>The metadata has loaded or changed, indicating a change in duration of the media.  This is sent, for example, when the media has loaded enough that the duration is known.</td> </tr> <tr> <td><code>emptied</code></td> <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a class="internal" href="/En/nsIDOMMediaHTMLElement#load()" title="En/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> method is called to reload it.</td> </tr> <tr> <td><code>empty</code></td> <td>Sent when an error occurs and the media is empty.</td> </tr> <tr> <td><code>ended</code></td> <td>Sent when playback completes.</td> </tr> <tr> <td><code>error</code></td> <td>Sent when an error occurs.  The element's <code>error</code> attribute contains more information.</td> </tr> <tr> <td><code>load</code></td> <td>The media has been completely retrieved.</td> </tr> <tr> <td><code>loadedfirstframe</code></td> <td>The first frame of the media has finished loading.</td> </tr> <tr> <td><code>loadedmetadata</code></td> <td>The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.</td> </tr> <tr> <td><code>loadstart</code></td> <td>Sent when loading of the media begins.</td> </tr> <tr> <td><code>pause</code></td> <td>Sent when playback is paused.</td> </tr> <tr> <td><code>play</code></td> <td>Sent when playback starts or resumes.</td> </tr> <tr> <td><code>ratechange</code></td> <td>Sent when the playback speed changes.</td> </tr> <tr> <td><code>seeked</code></td> <td>Sent when a seek operation completes.</td> </tr> <tr> <td><code>seeking</code></td> <td>Sent when a seek operation begins.</td> </tr> <tr> <td><code>timeupdate</code></td> <td>The time indicated by the element's <code>currentTime</code> attribute has changed.</td> </tr> <tr> <td><code>volumechange</code></td> <td>Sent when the audio volume changes (both when the volume is set and when the <code>muted</code> attribute is changed).</td> </tr> <tr> <td><code>waiting</code></td> <td>Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).</td> </tr> </tbody>
</table>
<p>You can easily watch for these events, using code such as the following:</p>
<pre>var v = document.getElementsByTagName("video")[0];

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
</pre>
<p>This example fetches the first video element in the document and attaches an event listener to it, watching for the seeked event, which is sent whenever a seek operation completes.  The listener simply calls the element's <code>play()</code> method, which starts playback.</p>
<p>Then, in line 4, the example sets the element's <code>currentTime</code> attribute to 10.0, which initiates a seek operation to the 10-second mark in the media.  This causes a <code>seeking</code> event to be sent when the operation begins, then a <code>seeked</code> event to be dispatched when the seek is completed.</p>
<p>In other words, this example seeks to the 10-second mark in the media, then begins playback as soon as that's finished.</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