08/01/2017

UtilizandoudioevdeocomHTML5HTML|MDN

Utilizando udio e vdeo com

HTML5
O HTML5 introduz o suporte de mdia embutido por meio dos elementos <audio> e <video> ,
oferecendo um possibilidade de incorporar facilmente os documentos HTML.

Incorporando meios:
Incorporar mdia em documentos HTML simples:

1
2
3

<videosrc="http://v2v.cc/~j/theora_testsuite/320x240.ogg"controls><Videosrc="http:
Seunavegadornosuportaoelemento<code>video</code>.Seunavegadornosuportaoelem
</video></Video>

Esse exemplo reproduz uma amostra de vdeo, com controles de reproduo, a partir do site Theora.
Aqui est um exemplo de udio incorporado em um documento HTML

1
2
3

<audiosrc="/test/audio.ogg"><Audiosrc="/test/audio.ogg">
<p>Seunevegadornosuportaoelementoaudio.</p><P>Seunavegadornosuportaoelemento
</audio></Audio>

O atributo src PODE Ser um URL do Arquivo de udio OU O Caminho do Arquivo no Sistema local.

1
2
3

<audiosrc="audio.ogg"controlsautoplayloop><Audiosrc="audio.ogg"controlaoloopde
<p>Seunavegadornosuportaoelementoaudio</p><P>Seunavegadornosuportaoelemento
</audio></Audio>

Esse exemplo de cdigo usa atributos do elemento <audio> :

controls : Mostra OS Controles Padro PARA O udio na page.
autoplay : Faz com que o udio reproduz automaticamente.
loop : Faz com que o udio repita automaticamente.

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FHTML%2F

1/8

08/01/2017

UtilizandoudioevdeocomHTML5HTML|MDN

<audiosrc="audio.mp3"preload="auto"controls></audio>

O atributo preload usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:
"none" no carrega o arquivo
"auto" carrega o arquivo
"metadata" Metadados "metadata" carrega apenas os metadados do arquivo
Vrios cheiros podem ser especicados utilizando o elemento <source> para disponibilizar vdeo ou udio
codicados em formatos diferentes para navegadores diferentes. Por exemplo:

1
2
3

<videocontrols><Controlesdevdeo>
<sourcesrc="foo.ogg"type="video/ogg"><Sourcesrc="foo.ogg"type="video/ogg">
<sourcesrc="foo.mp4"type="video/mp4"><Sourcesrc="foo.mp4"type="video/mp4">

4
5

Seunavegadornosuportaoelemento<code>video</code>.Seunavegadornosuportaoelem
</video></Video>

Isso reproduz o arquivo Ogg em navegadores que suportam o formato Ogg. No compatvel com o Ogg, o
navegador reproduz o arquivo MPEG-4. Veja tambm uma lista de formatos de mdia suportados pelos
elementos de udio e vdeo para detalhes.
Tambm possvel especicar os codecs que o arquivo de mdia requer; O que fazer para fazer escolhas mais
inteligentes:

1
2
3
4

<videocontrols><Controlesdevdeo>
<sourcesrc="foo.ogg"type="video/ogg;codecs=dirac,speex"><Sourcesrc="foo.ogg"type
Seunavegadornosuportaoelemento<code>video</code>.Seunavegadornosuportaoelem
</video></Video>

Aqui especicado que o vdeo usa os codecs Dirac e Speex. Se o navegador suportar Ogg, mas no suportar
os codecs especicados, o vdeo no deve ser reproduzido.
type atributo do type no especicado, o tipo de mdia obtido sem servidor e vericado se o navegador
consegue reproduzi-lo; Se ele no pode ser processado, o prximo source vericado. Se nenhum dos
elementos da source pode ser utilizado, um error enviado para o elemento de video . Se o type atributo
especicado, ele comparado a todos os tipos que o navegador no reconhecido, o servidor no
vericado; Ao invs disso, o prximo source vericado.
Veja Media eventos para uma lista completa de eventos relacionados a reproduo de mdia. Parmetros
sobre formatos de mdia suportados por vrios navegadores, veja formatos de mdia suportados pelos
elementos de udio e vdeo .

Controlando uma reproduo de mdia

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FHTML%2F

2/8

08/01/2017

UtilizandoudioevdeocomHTML5HTML|MDN

Controlando uma reproduo de mdia

Depois de uma mdia incorporada usando nenhum documento HTML usando os novos elementos, possvel
controlar o cdigo de JavaScript. Por exemplo, para comear (ou repetir) a reproduo, voc pode fazer isto:

1
2

varv=document.getElementsByTagName("video")[0];Varv=document.getElementsByTagName
v.play();V.play();

A primeira linha pega o primeiro elemento vdeo, ea segunda chama o mtodo play() fazer o elemento,
como denido na interface nsIDOMHTMLMediaElement , que utilizado para implementar elementos de mdia
Controlando um reprodutor de udio para reproduzir, pausar, aumentar e diminuir o volume usando
JavaScript simples.

1
2
3
4
5
6
7

<audioid="demo"src="audio.mp3"></audio><Audioid="demo"src="audio.mp3"></audio>
<div><Div>
<buttononclick="document.getElementById('demo').play()">Reproduziroudio</button>
<buttononclick="document.getElementById('demo').pause()">Pausaroudio</button><Button
<buttononclick="document.getElementById('demo').volume+=0.1">Aumentarovolume</button
<buttononclick="document.getElementById('demo').volume=0.1">Diminuirovolume</button
</div></Div>

Parar o download da mdia

O objetivo do projeto o seguinte: o conceito de elemento de coleo de elementos, o conceito de elemento
de coleo de elementos, o conceito de elemento de coleo de elementos.
Esta uma maneira de parar o download de:

1
2

varmediaElement=document.getElementById("myMediaElementID");VarmediaElement=document
mediaElement.pause();MediaElement.pause();

mediaElement.src="";MediaElement.src="";

Ao Denir o atributo src do elemento de Mdia pargrafo Uma cadeia Vazia, o decodicador interno do
elemento E Destruido, O Que PARA O download.

Navegando pela mdia

Elementos de mdia fornecem para mover uma posio atual para pontos especcos do contedo da mdia.
Iso feito para denir o valor da propriedade currentTime no elemento; HTMLMediaElement para mais
detalhes sobre como propriedades do elemento. Simplesmente dena o valor para o tempo, em segundos,
em que voc quer que uma reproduo do vdeo continuar.
https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FHTML%2F

3/8

08/01/2017

UtilizandoudioevdeocomHTML5HTML|MDN

Rpido Voc PODE USAR um Propriedade seekable Para determinar OS Valores em Que Possvel ir no
momento. Essa propriedade retorna ao objeto TimeRanges listando os intervalos de tempo em que voc pode
navegar.

1
2

varmediaElement=document.getElementById('mediaElementID');VarmediaElement=document
mediaElement.seekable.start();MediaElement.seekable.start();//Retornaotempoemqueo

3
4

mediaElement.seekable.end();MediaElement.seekable.end();//Retornaotempoemqueoarqu

mediaElement.currentTime=122;MediaElement.currentTime=122;//Irpara122segundos//
mediaElement.played.end();MediaElement.played.end();//Retornaonumerodesegundosque

Especicando o intervalo de reproduo

Quado especicando a URI de um elemento <audio> ou <video> , voc pode incluir opcionalmente
informaes adicionais para especicar uma parte da mdia para ser reproduzida. Para fazer isso, use uma
hashtag ("#") para a descrio do fragmento da mdia.
O intervalo especicado usando uma sintaxe:

#t=[tempoinicial],[tempofinal]#T=[tempoinicial],[tempofinal]

O tempo pode ser especicado como um nmero de segundos (como um valor de ponto utuante) 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
Especica que o intervalo entre 10 e 20 segundos deve ser reproduzido.
Http://foo.com/video.ogg#t=.10.5
Especica que o vdeo deve ser reproduzido do incio at 10,5 segundos.
Http://foo.com/video.ogg#t=,02:00:00
Especica que o vdeo deve ser reproduzido do incio at 2 horas.
Http://foo.com/video.ogg#t=60,
Especica que o vdeo deve ter 60 segundos e ser reproduzido at o nal.
Nota do Gecko 9.0

(Firefox9.0/Thunderbird9.0/SeaMonkey2.6)

O intervalo de reproduo foi adicionado especicao URI de elemeto media no Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0
/ SeaMonkey 2.6). Atualmente, uma parte nica da Fragmentos de mdia URI especicao implementada pelo Gecko, e
apenas pode ser usado para especicar uma fonte de elementos de mdia, e no na barra de endereo.

Opes alternativas

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FHTML%2F

4/8

08/01/2017

UtilizandoudioevdeocomHTML5HTML|MDN

Opes alternativas
O HTML inclui os elementos que podem ser colocados entre as tags como iniciados e nalizados por cdigo
que processado por navegadores que no so suportam meios emHTML5. possvel aproveitar esse fato
para provar alternativas para esses navegadores.
Esa seco mostra duas alternativas possveis para vdeos. Em cada caso, consulte o suporte HTML5, ele
usado; Se no para posvel, a alternativa utilizada.

Utilizando Flash
Voc pode usar Flash para reproduzir um vdeo no formato Flash caso do elemento <video> no suportado:

1
2

<videosrc="video.ogv"controls><Videosrc="video.ogv"controls>
<objectdata="flvplayer.swf"type="application/xshockwaveflash"><Objetodados="flv

3
4

<paramvalue="flvplayer.swf"name="movie"/><Paramvalue="flvplayer.swf"name="mo
</object></Object>

</video></Video>

Nota Que Voc No DEVE Incluir classid na tag object para qu pgina Outros Navegadores compatveis
Alm do Internet Explorer Sejam.

Reproduzindo vdeos usando um applet Java

Existe uma applet Java chamada Cortado que pode ser usado como alternativa para reproduzir vdeos em
Ogg em navegadores que suportam um Java, mas no suportam vdeos em HTML5:

<videosrc="my_ogg_video.ogg"controlswidth="320"height="240"><Videosrc="my_ogg_video

<objecttype="application/xjavaapplet"<Objecttype="application/xjavaapplet"

3
4

width="320"height="240">Width="320"height="240">
<paramname="archive"value="cortado.jar"><Paramname="archive"value="cortado.ja

5
6

<paramname="code"value="com.fluendo.player.Cortado.class"><Paramname="code"valu
<paramname="url"value="my_ogg_video.ogg"><Paramname="url"value="my_ogg_video.

7
8

<p>YouneedtoinstallJavatoplaythisfile.</p><P>VocprecisainstalaroJavapa
</object></Object>

</video></Video>

Se voc no prope um elemento lho alternativo do elemento objeto cortado, como o elemento <p> font
color = "text-align:"> Da pgina

Tratamento de erros

(Fire f o x 4 / Th u n d e rb ird 3 . 3 / S e a Mo n ke y 2 . 1 )

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FHTML%2F

5/8

08/01/2017

UtilizandoudioevdeocomHTML5HTML|MDN

A partir do Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), o gerenciamento de erros revisto para a
ltima verso da especicao do HTML5. Ao invs do evento error ser enviado ao elemento media, ele
enviado ao elemento lho <source> correspondente s fontes em que ocorreu o erro.
Isso permite que voc descubra que a fonte falhou, o que pode ser til. Considere esse cdigo HTML:

<video><Video>

<sourceid="mp4_src"<Sourceid="mp4_src"

3
4
5

src="video.mp4"Src="video.mp4"
type='video/mp4;Type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'>Codecs="a
</source></Source>

6
7
8
9

<sourceid="3gp_src"<Sourceid="3gp_src"
src="video.3gp"Src="video.3gp"
type='video/3gpp;Type='video/3gpp;codecs="mp4v.20.8,samr"'>Codecs="mp4v.2
</source></Source>

10
11
12

<sourceid="ogg_src"<Sourceid="ogg_src"
src="video.ogv"Src="video.ogv"
type='video/ogg;Type='video/ogg;codecs="theora,vorbis"'>Codecs="theora,v

13
14

</source></Source>
</video></Video>

Como voc no sabe mais sobre o MP4 e 3GP por causa patenteado, os elementos <source> com os IDs
"mp4_src" e "3gp_src" vai receber eventos error antes que o resgate Oggsoft carregado. Como fontes so
testadas na ordem em que aparecem, e assim como uma carga carregada de correo, o resto das fontes no
so testadas.

Detectando quando for carregada

Para que todos os elementos lhos <source> falharam, conra os valores do atributo networkState do
elemento media. Se esse valor para HTMLMediaElement.NETWORK_NO_SOURCE , voc sabe que todas as fontes
falharam o carregamento.
Clique aqui para adicionar uma nova fonte ao elemento novo <source> como lho do elemento de mdia, ou
Gecko tenta carregar o recurso especicado.

Veja tambm
Os elementos HTML relacionados a mdia: <audio> , <video> , <source> ;
Manipulao de vdeo usando tela
Apresentando a Extenso de API de udio
nsIDOMHTMLMediaElement
Formatos de mdia suportados pelos elementos de udio e vdeo

Livro de receitas de Theora

Popcorn.js - A estrutura de mdia HTML5

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FHTML%2F

6/8

08/01/2017

UtilizandoudioevdeocomHTML5HTML|MDN

Kaltura Video Library Soluo , uma biblioteca JavaScript (mwEmbed) que suporta alternativas de
reproduo usando HTML5, VLC Player, Java Cortado e OMTK Flash Vorbis player. ( utilizado pela

Wikimedia)

OMTK - Flash , uma biblioteca Flash que implementa um decodicador Vorbis

Projekktor Player , um wrapper em JavaScript para udio e vdeo com alternativas de reproduo em
ash, open source e GPL

Applet Cortado , uma soluo para a reproduo de udio e vdeo em Java, mantido pelo Xiph.org

Video.JS , uma estrutura e reprodutor de mdia para HTML5 (open source).

MediaElement.js - estrutura aberta para udio e vdeo em HTML5 com uma biblioteca Flash
customizada que imita uma API de HTML5 para navegadores antigos

Flv Player - um jogador de vdeo alternativo para HTML5

Documentao HTML5

HTML

JavaScript

CSS

udio vdeo Lona

MathML

AppCache

WebGL SVG

WebForms

Microformatos

Armazenamento

WebWorkers

de protocolo

IndexedDB

Eventos Arraste e

Geolocalizao

WebSockets

solte Manipulador

Foco

NewSelectors

Efeitos

SemanticTags

Tipograa Visual

https://translate.google.com.br/translate?hl=ptBR&sl=en&tl=pt&u=https%3A%2F%2Fdeveloper.mozilla.org%2FptBR%2Fdocs%2FWeb%2FHTML%2F

7/8