Áudio e Vídeo com HTML5

Por muitos anos, quando desejávamos incluir um áudio e/ou vídeo em nossas páginas, pensávamos imediatamente no Flash. Isso por conta deste plugin está presente na maioria dos navegadores.

Devido às inconsistências dos navegadores, era preciso adicionar tanto o elemento <object> quanto o elemento <embed>, duplicando muitos atributos. Isso sem falar que plugin's como o Flash causam muitas instabilidades e, eventualmente, fecham o navegador.

Com a chegada do HTML5, as tag's <audio> e <vídeo> foram criadas, entre outros motivos, para acabar com a dependência de plugin's para a reprodução de conteúdos multimídias nas páginas, de forma confiável e sem ter que criar exceções para os diferentes navegadores.

Abaixo segue uma tabela simples de compatibilidade entre os navegadores e as novas tag's:

De forma geral, para inserirmos um áudio no HTML5, devemos utilizar a tag <audio> e definirmos os atributos "src", "controls", "autoplay" e "loop".

Sintaxe:

<audio src="localização da áudio" 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" />

Exemplo:

<audio src="http://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg" controls="true" autoplay="true" loop="true" />

ou simplesmente

<audio src="http://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg" controls autoplay loop />

Contudo, a implementação de apenas um formato de áudio pode comprometer a sua reprodução, pois corre o risco de não ser interpretado pelo navegador.

Para resolvermos este pequeno entrave, utilizamos a tag <source>, dentro da tag <audio> e nele definimos os vários formatos possíveis do mesmo arquivo de áudio.

Desta forma, evitamos a possibilidade do áudio não ser executado.

Exemplo:

<audio autoplay controls loop>

<source src="http://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg"

type="audio/ogg" />

<source src="http://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3"

type="audio/mpeg" />

<p> Seu navegador não suporta HTML5. </p>

</audio>

Observação: Quando um arquivo de áudio é muito grande, utilizamos o atributo preload na tag <audio>. Ele pode assumir 3 valores: "none" - não carrega o arquivo, "auto" - carrega o arquivo e "metadata" - carrega apenas os meta dados do arquivo.

O uso de vídeo é muito semelhante ao de áudio com o HTML5, devemos utilizar a tag <video> e definirmos os atributos "src", "controls", "autoplay", "loop", "width" e "height".

Sintaxe:

<video src="localização da vídeo" controls = "mostra os controles padrão para o vídeo na página" autoplay = "faz com que o vídeo reproduza automaticamente" loop = "faz com que o vídeo repita automaticamente" width = "define a largura do player" height = "define a altura do player" />

Exemplo:

<video src="http://techslides.com/demos/sample-videos/small.mp4" controls = "true" autoplay = "true" loop = "true" width = "600" height = "480" />

ou simplesmente

<video src="http://techslides.com/demos/sample-videos/small.mp4" controls autoplay loop width = "600" height = "480" />

Com a tag <video> também podemos utilizar a tag <source>, para disponibilizarmos diferentes formatos de vídeo:

Exemplo:

<video controls autoplay loop width = "600" height = "480">

<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">

<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">

<p> Seu navegador não suporta HTML5. </p>

</vídeo>

#Áudio #Vídeo #HTML