Artigos HTML HTML5 - As tags AUDIO e VIDEO

Aplicações práticas com HTML5

Com a chegada do HTML5 temos muitas novidades, umas conceituais outras mais visíveis, entre estas podemos destacar a criação de três novas tags, <video>, <audio> e <canvas>. As duas primeiras serão abordadas aqui nesse artigo, saiba mais sobre a tag <canvas>.

Mais sobre as Tags <audio> e <video> no HTML

Para quem ainda não sabe, as tag's <audio> e <video> são tag's de media que foram criadas, entre outros motivos, para acabar com a dependência de plugin's para a reprodução de áudio e vídeo nas páginas. Dessa forma em sites que precisaríamos ter instalado o Flash, por exemplo o Youtube, não iremos mais, basta que sejam implementadas essas novas tag's e que tenhamos um navegador compatível com HTML5, o que não é incomum hoje em dia tendo em vista que todos os navegadores mais recente são. O IE8 foge dessa lista apenas o IE9 suporta o HTML5.

Como já sabemos, a simplicidade é uma das características do HTML5, para estas tag's isso não é diferente, pois agora passaremos a manipular áudio e vídeo praticamente como manipulamos a inserção de imagens.

Sabendo disso vejamos a seguir algumas características e demonstrações de ambas, de maneira a abordar o básico porém funcional. Vamos começar com a tag <audio>.

Saiba mais: Curso de HTML Básico

A tag <audio>

Como o nome já sugere esta tag serve para reproduzirmos uma mídia de áudio, vejamos:

Listagem 1: Demonstração básica do uso da tag <audio>


<audio autoplay="autoplay" controls="controls">
<source src="sua_musica.mp3" type="audio/mp3" />
seu navegador não suporta HTML5
</audio>

Na Listagem 1 temos um exemplo básico do uso da tag <audio>, nela estamos setando autoplay e controls, que servem para tocar automaticamente e habilitar os controles do player, respequitivamente. Será reproduzida a mídia sua_musica.mp3 definina na tag <source> dentro da tag <audio> pela propriedade “src”. Veja a Imagem 1 como ficaria no navegador:

Player criado pela tag <audio>

Figura 1: Player criado pela tag <audio>

Caso seu navegador não suporte o HTML5 você verá o seguinte: “seu navegador não suporta HTML5”

Como é por natureza um componente HTML e não um plugin, podemos fazer alguma modificações no player via CSS, como por exemplo, cor, tamanho, float e position.

Pode ser feita também a customização por outros elementos HTML e por meio de Javascript podemos controlar propriedades como o PLAY, PAUSE, VOLUME e por CSS criamos nosso próprio player.

Listagem 2: Controle da tag áudio por Javascript.

<!DOCTYPE HTML>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title>HTML5 Vídeo</title>
</head>

<body>
	<div>
	  <button onclick="document.getElementById('player').play()">Play</button>
	  <button onclick="document.getElementById('player').pause()">Pause</button>
	  <button onclick="document.getElementById('player').volume+=0.1">Aumentar volume</button>
	  <button onclick="document.getElementById('player').volume-=0.1">Diminuir volume</button>
	</div> 

	<audio id="player" autoplay="autoplay" controls="controls">
	  <source src="sua_musica.mp3" type="audio/mp3" />
	  seu navegador não suporta HTML5
	</audio>
</body>
</html>

O código acima resultaria mais ou menos como na Figura 2:

Controlando o áudio por Javascript
Figura 2: Controlando o áudio por Javascript

Este é apenas um exemplo básico, mas com um pouco conhecimento em javascript e CSS pode-se fazer um player muito bom. Dessa forma podemos desabilitar o atributo “controls”, para que tenhamos o controle apenas pelo nosso proprío player.

Os atributos da tag <audio>:

Atributo Valor Descrição
autoplay autoplay Define que o audio começará a ser tocado assim que ele estiver pronto.
controls controls Os controles serão mostrados.
loop loop Define que o audio começará a ser tocado novamente quando terminar.
preload preload Define que o audio será carregado enquanto a página é lida. Esse atributo é ignorado caso o atributo autoplay estiver definido.
src url URL do arquivo a ser tocado.

Formatos de áudio suportados:

Formato IE 8+ Firefox 3.5+ Opera 10.5+ Chrome 3.0+ Safari 3.0+
Ogg Vorbis Não Sim Sim Sim Não
MP3 Não Não Não Sim Sim
Wav Não Sim Sim Não Sim

Agora veremos a TAG <video>.

TAG <video>

Aqui seguimos o mesmo conceito da <audio>, inclusive sua sintaxe é muito parecida. Vejamos o exemplo da Listagem 3.

Listagem 3: A tag <video>


<!DOCTYPE HTML>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5 Vídeo</title>
</head>

<body>
<video width="320" height="240" controls="controls">
    <source src="filme.mp4" type="video/mp4">
    <source src="filme.ogg" type="video/ogg">
  Seu navegador não suporta HTML5.
</video>
</body>
</html>

Vejam que praticamente não há nada diferente do que já vimos, exceto as propriedades width e height que não tínhamos definido na tag <audio>. Mas para o video é uma boa prática e extremamente importante, pois se não especificarmos o tamanho que a tag deve ocupar, o navegador pode se perder e causar um desastre no restante do layout.

Os formatos de vídeos suportados atualmente são:

Navegador MP4 WebM Ogg
Internet Explorer 9 SIM NÃO NÃO
Firefox 4.0 NÃO SIM SIM
Google Chrome 6 SIM SIM SIM
Apple Safari 5 SIM NÃO NÃO
Opera 10.6 NÃO SIM SIM

Da mesma forma como na tag <audio>, a tag <video> também pode ser manipulada por Javascript.

Na Listagem 4 pode ser observado o trecho de código Javascript escrito para controlar um vídeo.

Listagem 4: Controlando o vídeo por Javascript


<script>
function playPause(){ 
if (video.paused) 
  video.play(); 
else 
  video.pause(); 
} 

function grande(){ 
/*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
video.width=560; 
} 

function pequeno(){ 
/*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
video.width=320; 
} 

function normal(){ 
/*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
video.width=420; 
} 
</script>

Bem pessoal fico por aqui, espero que tenham gostado e principalmente ficado curiosos para saber mais desse assunto, dessa independência de plugins.

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 reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.

Aqui há 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 <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 <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.

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.