diff options
Diffstat (limited to 'files/pt-br/web/html/using_html5_audio_and_video/index.html')
| -rw-r--r-- | files/pt-br/web/html/using_html5_audio_and_video/index.html | 239 |
1 files changed, 239 insertions, 0 deletions
diff --git a/files/pt-br/web/html/using_html5_audio_and_video/index.html b/files/pt-br/web/html/using_html5_audio_and_video/index.html new file mode 100644 index 0000000000..895ba11988 --- /dev/null +++ b/files/pt-br/web/html/using_html5_audio_and_video/index.html @@ -0,0 +1,239 @@ +--- +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 +--- +<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"><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> + Seu navegador não suporta o elemento <code>video</code>. +</video> +</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"><audio src="/test/audio.ogg"> +<p>Seu nevegador não suporta o elemento audio.</p> +</audio> +</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"><audio src="audio.ogg" controls autoplay loop> +<p>Seu navegador não suporta o elemento audio </p> +</audio> +</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><audio src="audio.mp3" preload="auto" controls></audio></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"><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> +</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"><video controls> + <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> + Seu navegador não suporta o elemento <code>video</code>. +</video></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"><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> +</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"><video src="video.ogv" controls> + <object data="flvplayer.swf" type="application/x-shockwave-flash"> + <param value="flvplayer.swf" name="movie"/> + </object> +</video> +</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"><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> +</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"><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></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> |