path: root/files/pt-br/web/html/using_html5_audio_and_video/index.html

---
title: Utilizando áudio e vídeo com HTML5
slug: Web/HTML/Using_HTML5_audio_and_video
translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video
---
<p style="margin-left: 40px;">O HTML5 introduz o suporte de mídia embutido por meio dos elementos {{ HTMLElement("audio") }} e {{ HTMLElement("video") }}, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.</p>

<h2 id="Incorporando_mídia">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 reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.</p>

<p>Aqui há 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  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ção_de_mídia">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ídia">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ídia">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ção">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>Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.</dd>
 <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt>
 <dd>Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.</dd>
 <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt>
 <dd>Especifica que o vídeo deve ser reproduzido do início até 2 horas.</dd>
 <dt><span class="nowiki">http://foo.com/video.ogg#t=60,</span></dt>
 <dd>Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.</dd>
</dl>

<div class="geckoVersionNote" style="">
<p>{{ gecko_callout_heading("9.0") }}</p>

<p>O intervalo de reprodução foi adicionado à especificação URI od elemeto media no Gecko 9.0 {{ geckoRelease("9.0") }}. Atualmente, é a única parte da <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.</p>
</div>

<h2 id="Opções_alternativas">Opções alternativas</h2>

<p>O HTML inclui elementos que podem ser colocados entre as tags iniciais e finais de codigo que é processado por navegadores que não suportam mídia em HTML5. É possível aproveitar esse fato para prover alternativas para esses navegadores.</p>

<p>Esa seção mostra duas alternativas possíveis para vídeos. Em cada caso, se o naegador suportar HTML5, ele é usado; se não for posível, a alternativa é utilizada.</p>

<h3 id="Utilizando_Flash">Utilizando Flash</h3>

<p>Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja 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 deve incluir <code>classid</code> na tag <code>object</code> para que outros navegadores além do Internet Explorer sejam compatíveis.</p>

<h3 id="Reproduzindo_vídeos_em_Ogg_usando_uma_applet_Java">Reproduzindo vídeos em Ogg usando uma applet Java</h3>

<p>Existe uma applet Java chamada <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> que você pode utilizar como alternativa para reproduzir vídeos em Ogg em navegadores que possuem suporte a Java, mas não suportam vídeos em HTML5:</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>Se você não criar um elemento filho alternativo do elemento objeto cortado, como o elemento {{ HTMLElement("p") }} mostrado acima, o Firefox 3.5 que conseguem reproduzir o vídeo mas não tem Java instalado vao informar incorretamente ao usuário que ele precisa instalar um plugin para visualizar o conteúdo da página.</p>

<p>{{ h1_gecko_minversion("Error handling", "2.0") }}</p>

<p>A partir do Gecko 2.0 {{ geckoRelease("2.0") }}, o gerenciamento de erros é revisada para corresponder à última versão da especificação do HTML5. Ao invés do evento <code>error</code> ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.</p>

<p>Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código 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>Como o FIrefox não suporta MP4 e 3GP por serem patenteados, os elementos {{ HTMLElement("source") }} com os IDs "mp4_src" e "3gp_src" vão receber eventos <code>error</code> antes que o rescurso Ogg seja carregado. As fontes são testadas na ordem em que aparecem, e assim que uma é carregada de maneira correta, o resto das fontes não são testadas.</p>

<h3 id="Detectando_quando_nenhuma_fonte_foi_carregada">Detectando quando nenhuma fonte foi carregada</h3>

<p>Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo <code>networkState</code> do elemento media. Se esse valor for <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, você saberá que todas as fontes falharam o carregamento.</p>

<p>Se nesse ponto você inserir uma outra fonte ao inserir um novo elemento {{ HTMLElement("source") }} como filho do elemento media, o Gecko tenta carregar o recurso especificado.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>Os elementos HTML relacionados a mídia: {{ 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>, uma biblioteca JavaScript (mwEmbed) que suporta alternativas de reprodução utilizando HTML5, VLC Player, Java Cortado e OMTK Flash Vorbis player. (É utilizado pela Wikimedia)</li>
 <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, uma biblioteca Flash que implementa um decodificador Vorbis</li>
 <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, um wrapper em JavaScript para áudio e vídeo com alternativas de reprodução em flash, open source e GPL</li>
 <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, uma solução para reprodução de áudio e vídeo em Java, mantido pelo Xiph.org</li>
 <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, uma framework e reprodutor de mídia para HTML5(open source).</li>
 <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - framework aberta para áudio e vídeo em HTML5 com uma biblioteca Flash customizada que imita a API de HTML5 para navegadores antigos</li>
 <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - uma player de vídeo alternativo para HTML5</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>