Guia HTML

HTML5 - As tags AUDIO e VIDEO

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (5)  (0)

Veja nesse artigo uma introdução as tags de mídia do HTML5 que vieram para acabar com a dependência de plugins para a reprodução de áudio e vídeo nos navegadores, veja como criar um player de áudio e vídeo e também como manipulá-los via Javascript.

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, <vídeo>,<áudio> e <canvas>. As duas primeiras serão abordadas aqui nesse artigo, enquanto sobre a <canvas> já foi escrito um artigo que você pode conferir aqui nesse link: http://www.devmedia.com.br/html5-a-tag-canvas/25413.

Para quem ainda não sabe, as tag's <audio> e <vídeo> 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>.

A tag <áudio>

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>

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

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

</html>

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>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5 Audio</title>
</head>

<body>
<audio 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>:

AtributoValorDescrição
autoplayautoplayDefine que o audio começará a ser tocado assim que ele estiver pronto.
controlscontrolsOs controles serão mostrados.
looploopDefine que o audio começará a ser tocado novamente quando terminar.
preloadpreloadDefine que o audio será carregado enquanto a página é lida. Esse atributo é ignorado caso o atributo autoplay estiver definido.
srcurlURL do arquivo a ser tocado.

Formatos de áudio suportados:

FormatoIE 8+Firefox 3.5+Opera 10.5+Chrome 3.0+Safari 3.0+
Ogg VorbisNãoSimSimSimNão
MP3NãoNãoNãoSimSim
WavNãoSimSimNãoSim

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:

NavegadorMP4WebMOgg
Internet Explorer 9SIMNÃONÃO
Firefox 4.0NÃOSIMSIM
Google Chrome 6SIMSIMSIM
Apple Safari 5SIMNÃONÃO
Opera 10.6NÃOSIMSIM

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. Fiquem a vontade para deixar seus comentário e críticas e até a próxima.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?