Revision 293446 of Utilizando áudio e vídeo com HTML5

  • Revision slug: Using_HTML5_audio_and_video
  • Revision title: Utilizando áudio e vídeo com HTML5
  • Revision id: 293446
  • Created:
  • Creator: LeonardoPacheco
  • Is current revision? No
  • Comment

Revision Content

O HTML5 introduz suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incormorar facilmente mídia em documentos HTML.

Incorporando mídia:

Incorporar mídia em documentos HTML é simples:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Seu navegador não suporta o elemento <code>video</code>.
</video>

Esse exemplo rerpoduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.

Este é um exemplo de áudio incorporado em um documento HTML

<audio src="/test/audio.ogg">
<p>Seu nevegador não suporta o elemento audio.</p>
</audio>

O atributo src pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.

<audio src="audio.ogg" controls autoplay loop>
<p>Seu navegador não suporta o elemento audio </p>
</audio>

Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:

  • controls : Mostra os controles padrão para o áudio na página.
  • autoplay : Faz com que o áudio reproduza automaticamente.
  • loop : Faz com que o áudio repita automaticamente.
<audio src="audio.mp3" preload="auto" controls></audio>

O atributo preload é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:

  • "none" não carrega o arquivo
  • "auto" carrega o arquivo
  • "metadata" carrega apenas os meta dados do arquivo

Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. Por exemplo:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Seu navegador não suporta o elemento <code>video</code>.
</video>

Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo  MPEG-4. Veja também a lista media formats supported by the audio and video elements para detalhes.

Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Seu navegador não suporta o elemento <code>video</code>.
</video>

Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.

Se o atributo type não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo source é verificado. Se nenhum dos elementps source pode ser utilizado, um evento error é enviado para o elemento video. Se o atributo type estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo source é verificado.

Veja Media events para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja Media formats supported by the audio and video elements.

Controlando a reprodução de mídia

Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:

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

A primeira linha pega o primeiro elemento video, e a segunda chama o método play() do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia

Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Reproduzir o áudio</button>
  <button onclick="document.getElementById('demo').pause()">Pausar o áudio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Aumentar o volume</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Diminuir o volume</button>
</div> 

Parando o download de mídia

Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.

Esta é um modo para parar o download imediatamente:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = ""; 

Ao definir o atributo src do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.

Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade currentTime no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.

Você pode usar a propriedade seekable para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Retorna o tempo em que o arquivo começa (em segundos)
mediaElement.seekable.end();    // Retorna o tempo em que o arquivo termina (em segundos)
mediaElement.currentTime = 122; // Ir para 122 segundos
mediaElement.played.end();      // Retorna o numero de segundos que o navegador reproduziu

Especificando o intervalo de reprodução

Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.

O intervalo é especificado usando a sintaxe:

#t=[tempoinicial],[tempofinal]

O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).

Alguns exemplos:

http://foo.com/video.ogg#t=10,20
Specifies that the video should play the range 10 seconds through 20 seconds.
http://foo.com/video.ogg#t=,10.5
Specifies that the video should play from the beginning through 10.5 seconds.
http://foo.com/video.ogg#t=,02:00:00
Specifies that the video should play from the beginning through two hours.
http://foo.com/video.ogg#t=60,
Specifies that the video should start playing at 60 seconds and play through the end of the video.

{{ gecko_callout_heading("9.0") }}

The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the Media Fragments URI specification implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.

Fallback options

HTML included between, for example, the opening and closing tags of media elements is processed by browsers that don't support HTML5 media. You can take advantage of this fact to provide alternative fallback media for those browsers.

This section provides two possible fallback options for video. In each case, if the browser supports HTML5 video, that is used; otherwise, the fallback option is used.

Using Flash

You can use Flash to play a Flash format movie if the {{ HTMLElement("video") }} element isn't supported:

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

Note that you shouldn't include classid in the object tag in order to be compatible with browsers other than Internet Explorer.

Playing Ogg videos using a Java applet

There's a Java applet called Cortado that you can use as a fallback to play Ogg videos in browsers that have Java support but don't support HTML5 video:

<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">
     <p>You need to install Java to play this file.</p>
  </object>
</video>

If you do not create an alternate child element of the cortado object element, such as the {{ HTMLElement("p") }} element above, FireFox 3.5 installations that handle the video natively but do not have Java installed will incorrectly inform the user that they need to install a plugin to view content on the page.

{{ h1_gecko_minversion("Error handling", "2.0") }}

Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, error handling has been revised to match the latest version of the HTML5 specification. Instead of the error event being dispatched to the media element itself, it now gets delivered to the child {{ HTMLElement("source") }} elements corresponding to the sources resulting in the error.

This lets you detect which sources failed to load, which may be useful. Consider this HTML:

<video>
<source id="mp4_src"
        src="video.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</source>
<source id="3gp_src"
        src="video.3gp"
        type='video/3gpp; codecs="mp4v.20.8, samr"'>
</source>
<source id="ogg_src"
        src="video.ogv"
        type='video/ogg; codecs="theora, vorbis"'>
</source>
</video>

Since Firefox doesn't support MP4 and 3GP due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive error events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.

Detecting when no sources have loaded

To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

If at that point you add another source by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.

See also

{{ HTML5ArticleTOC() }}

{{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}

Revision Source

<p>O HTML5 introduz suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incormorar facilmente mídia em documentos HTML.</p>
<h2 id="Incorporando_m.C3.ADdia.3A">Incorporando mídia:</h2>
<p>Incorporar mídia em documentos HTML é simples:</p>
<pre class="brush: html">
&lt;video src="<a class="linkification-ext" href="http://v2v.cc/~j/theora_testsuite/320x240.ogg" title="Linkification: http://v2v.cc/~j/theora_testsuite/320x240.ogg">http://v2v.cc/~j/theora_testsuite/320x240.ogg</a>" controls&gt;
  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
&lt;/video&gt;
</pre>
<p>Esse exemplo rerpoduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.</p>
<p>Este é um exemplo de áudio incorporado em um documento HTML</p>
<pre class="brush: html">
&lt;audio src="/test/audio.ogg"&gt;
&lt;p&gt;Seu nevegador não suporta o elemento audio.&lt;/p&gt;
&lt;/audio&gt;
</pre>
<p>O atributo <code>src</code> pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.</p>
<pre class="brush: html">
&lt;audio src="audio.ogg" controls autoplay loop&gt;
&lt;p&gt;Seu navegador não suporta o elemento audio &lt;/p&gt;
&lt;/audio&gt;
</pre>
<p>Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:</p>
<ul>
  <li><code>controls</code> : Mostra os controles padrão para o áudio na página.</li>
  <li><code>autoplay</code> : Faz com que o áudio reproduza automaticamente.</li>
  <li><code>loop</code> : Faz com que o áudio repita automaticamente.</li>
</ul>
<pre class="brush: html">
<code>&lt;audio src="audio.mp3" preload="auto" controls&gt;&lt;/audio&gt;</code>
</pre>
<p>O atributo <code>preload</code> é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:</p>
<ul>
  <li><code>"none"</code> não carrega o arquivo</li>
  <li><code>"auto"</code> carrega o arquivo</li>
  <li><code>"metadata"</code> carrega apenas os meta dados do arquivo</li>
</ul>
<p>Vários arquivos podem ser especificados utilizando o elemento {{ HTMLElement("source") }} para disponibilizar vídeo ou áudio codificados em formatos diferentes para navegadores diferentes. 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" type="video/mp4"&gt;
  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
&lt;/video&gt;
</pre>
<p>Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. Se o navegador não suportar Ogg, o navegador reproduz o arquivo&nbsp; MPEG-4. Veja também a lista <a 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> para detalhes.</p>
<p>Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:</p>
<pre class="brush: html">
&lt;video controls&gt;
  &lt;source src="foo.ogg" type="video/ogg; codecs=dirac, speex"&gt;
  Seu navegador não suporta o elemento &lt;code&gt;video&lt;/code&gt;.
&lt;/video&gt;</pre>
<p>Aqui é especificado que o vídeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas não suportar os codecs especificados, o vídeo não será reproduzido.</p>
<p>Se o atributo <code>type</code> não estiver especificado, o tipo de mídia é obtido no servidor e é verificado se o navegador consegue reproduzi-lo; se ele não pode ser renderizado, o próximo <code>source</code> é verificado. Se nenhum dos elementps <code>source</code> pode ser utilizado, um evento <code>error</code> é enviado para o elemento <code>video</code>. Se o atributo <code>type</code> estiver especificado, ele é comparado aos tipos que o navegador consegue reproduzir, e se ele não for reconhecido, o servidor não é verificado; ao invés disso, o próximo <code>source</code> é verificado.</p>
<p>Veja <a href="/en/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">Media events</a> para uma lista completa de eventos relacionados a reprodução de mídia. Para detalhes sobre os formatos de mídia suportados por vários navegadores, veja <a 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>.</p>
<h2 id="Controlando_a_reprodu.C3.A7.C3.A3o_de_m.C3.ADdia">Controlando a reprodução de mídia</h2>
<p>Após a mídia ser incorporada utilizando no documento HTML utilizando os novos elementos, é possível controla-los com código de JavaScript. Por exemplo, para começar (ou repetir) a reprodução, você pode fazer isto:</p>
<pre class="brush: js">
var v = document.getElementsByTagName("video")[0];
v.play();
</pre>
<p>A primeira linha pega o primeiro elemento video, e a segunda chama o método <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="en/nsIDOMHTMLMediaElement#play()"><code>play()</code></a> do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia</p>
<p>Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.</p>
<pre class="brush: html">
&lt;audio id="demo" src="audio.mp3"&gt;&lt;/audio&gt;
&lt;div&gt;
  &lt;button onclick="document.getElementById('demo').play()"&gt;Reproduzir o áudio&lt;/button&gt;
  &lt;button onclick="document.getElementById('demo').pause()"&gt;Pausar o áudio&lt;/button&gt;
  &lt;button onclick="document.getElementById('demo').volume+=0.1"&gt;Aumentar o volume&lt;/button&gt;
  &lt;button onclick="document.getElementById('demo').volume-=0.1"&gt;Diminuir o volume&lt;/button&gt;
&lt;/div&gt; 
</pre>
<h2 id="Parando_o_download_de_m.C3.ADdia">Parando o download de mídia</h2>
<p>Embora parar a reprodução de mídia seja fácil usando o método pause() do elemento, o navegador continua baixando a mídia até que o elemento de mídia seja excluído por meio da coleção de lixo.</p>
<p>Esta é um modo para parar o download imediatamente:</p>
<pre class="brush: js">
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = ""; 
</pre>
<p>Ao definir o atributo <code>src</code> do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.</p>
<h2 id="Navegando_pela_m.C3.ADdia">Navegando pela mídia</h2>
<p>Elementos de mídia provemsuporte para mover a posição atual para pontos específicos do conteúdo da mídia. Iso é feito ao definir o valor da propriedade <code>currentTime</code> no elemento; veja {{ domxref("HTMLMediaElement") }} para mais detalhes sobre as propriedades do elemento. Simplesmente defina o valor para o tempo, em segundos, em que você quer que a reprodução do vídeo continue.</p>
<p>Você pode usar a propriedade <code>seekable</code> para determinar os valores em que é possível ir no momento. Essa propriedade retorna o objeto {{ domxref("TimeRanges") }} listando os intervalos de tempo em que você pode navegar.</p>
<pre class="brush: js">
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Retorna o tempo em que o arquivo começa (em segundos)
mediaElement.seekable.end();    // Retorna o tempo em que o arquivo termina (em segundos)
mediaElement.currentTime = 122; // Ir para 122 segundos
mediaElement.played.end();      // Retorna o numero de segundos que o navegador reproduziu
</pre>
<h2 id="Especificando_o_intervalo_de_reprodu.C3.A7.C3.A3o">Especificando o intervalo de reprodução</h2>
<p>Quado especificando a URI de um elemento {{ HTMLElement("audio") }} ou {{ HTMLElement("video") }}, você pode incluir opcionalmente informações adicionais para especificar a parte da mídia a ser reproduzida. Para fazer isso, use uma hashtag ("#") seguida pela descrição do fragmento da mídia.</p>
<p>O intervalo é especificado usando a sintaxe:</p>
<pre>
#t=[tempoinicial],[tempofinal]
</pre>
<p>O tempo pode ser especificado como um nímero de segundos (como um valor de ponto flutuante) ou no formato horas:minutos:segundos (como 2:05:01 para 2 horas, 5 minutos, e 1 segundo).</p>
<p>Alguns exemplos:</p>
<dl>
  <dt>
    <span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt>
  <dd>
    Specifies that the video should play the range 10 seconds through 20 seconds.</dd>
  <dt>
    <span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt>
  <dd>
    Specifies that the video should play from the beginning through 10.5 seconds.</dd>
  <dt>
    <span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt>
  <dd>
    Specifies that the video should play from the beginning through two hours.</dd>
  <dt>
    <span class="nowiki">http://foo.com/video.ogg#t=60,</span></dt>
  <dd>
    Specifies that the video should start playing at 60 seconds and play through the end of the video.</dd>
</dl>
<div class="geckoVersionNote" style="undefined">
  <p>{{ gecko_callout_heading("9.0") }}</p>
  <p>The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.</p>
</div>
<h2 id="Fallback_options">Fallback options</h2>
<p>HTML included between, for example, the opening and closing tags of media elements is processed by browsers that don't support HTML5 media. You can take advantage of this fact to provide alternative fallback media for those browsers.</p>
<p>This section provides two possible fallback options for video. In each case, if the browser supports HTML5 video, that is used; otherwise, the fallback option is used.</p>
<h3 id="Using_Flash">Using Flash</h3>
<p>You can use Flash to play a Flash format movie if the {{ HTMLElement("video") }} element isn't supported:</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 that you shouldn't include <code>classid</code> in the <code>object</code> tag in order to be compatible with browsers other than Internet Explorer.</p>
<h3 id="Playing_Ogg_videos_using_a_Java_applet">Playing Ogg videos using a Java applet</h3>
<p>There's a Java applet called <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> that you can use as a fallback to play Ogg videos in browsers that have Java support but don't support HTML5 video:</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;p&gt;You need to install Java to play this file.&lt;/p&gt;
  &lt;/object&gt;
&lt;/video&gt;
</pre>
<p>If you do not create an alternate child element of the cortado object element, such as the {{ HTMLElement("p") }} element above, FireFox 3.5 installations that handle the video natively but do not have Java installed will incorrectly inform the user that they need to install a plugin to view content on the page.</p>
<p>{{ h1_gecko_minversion("Error handling", "2.0") }}</p>
<p>Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, error handling has been revised to match the latest version of the HTML5 specification. Instead of the <code>error</code> event being dispatched to the media element itself, it now gets delivered to the child {{ HTMLElement("source") }} elements corresponding to the sources resulting in the error.</p>
<p>This lets you detect which sources failed to load, which may be useful. Consider this HTML:</p>
<pre class="brush: html">
&lt;video&gt;
&lt;source id="mp4_src"
        src="video.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
&lt;/source&gt;
&lt;source id="3gp_src"
        src="video.3gp"
        type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
&lt;/source&gt;
&lt;source id="ogg_src"
        src="video.ogv"
        type='video/ogg; codecs="theora, vorbis"'&gt;
&lt;/source&gt;
&lt;/video&gt;</pre>
<p>Since Firefox doesn't support MP4 and 3GP due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive <code>error</code> events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.</p>
<h3 id="Detecting_when_no_sources_have_loaded">Detecting when no sources have loaded</h3>
<p>To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's <code>networkState</code> attribute. If this is <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, you know that all the sources failed to load.</p>
<p>If at that point you add another source by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>The media-related HTML elements: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li>
  <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li>
  <li><a href="/en/Introducing_the_Audio_API_Extension" title="en/Introducing the Audio API Extension">Introducing the Audio API Extension</a></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></li>
  <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li>
  <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li>
  <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, a JavaScript library (mwEmbed) which supports a seamless fallback with HTML5, VLC Player, Java Cortado and OMTK Flash Vorbis player. (It is used by Wikimedia)</li>
  <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, a Flash library which implements a Vorbis decoder</li>
  <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, a JavaScript wrapper for audio- and video-tags with flash fallback, open source, GPL</li>
  <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, an audio/video playback solution in Java maintained by Xiph.org</li>
  <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, an open source HTML5 video player and framework.</li>
  <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework with a custom Flash shim that mimic HTML5 media API for older browsers.</li>
  <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<div>
  {{ languages({ "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox", "es": "es/Usando_audio_y_video_en_Firefox", "ja": "ja/Using_HTML5_audio_and_video","zh-cn":"zh-cn/Using_HTML5_audio_and_video" }) }}</div>
Revert to this revision