Elementos áudio e vídeo, e codecs

O uso de elementos como áudio, vídeo e codecs são extremamente comuns em páginas web e o modo de inserir elementos como estes é simples.

1. Para adicionar  áudio em sua página web é preciso usar o elemento <audio> em seu projeto:

<audio src=”mus.oga” controls=”true” autoplay=”true” />

• O uso de “controls” no elemento serve para definir se será exibido na tela os comandos de play, pause, controle de volume, contador de tempo e progresso do áudio.  É preciso validar sua definição usando “true” ou “false”, se setado (informado) “false” o player deverá ser controlado via javascript.
• Já o uso de “autoplay” define se o player toca logo após o carregamento da pagina, precisando também validar sua definição.

Se caso o formato do codec livre OggVorbis (.oga) não for suportado em determinada plataforma é preciso definir os áudios em outro(s) formatos:

<audio controls=”true” autoplay=”true”>
 <source src=”mus.oga” />
 <source src=”mus.mp3” />
 <source src=”mus.wma” />
</audio>

2. A inserção de vídeo é peculiarmente parecida com o uso do áudio. Utiliza-se o elemento <video> da seguinte forma:

<video src=”u.ogv” width=”400” height=”300” />

• “width” é a definição da largura do vídeo e o “height” define sua altura.

E com vários elementos source:

<video controls=”true” autoplay=”true” width=”400” height=”300”>
 <source src=”u.ogv” />
 <source src=”u.mp4” />
 <source src=”u.wmv” />
 </video>

3. Codecs: são ferramentas para codificação/decodificação necessárias para a reprodução de vídeo e áudio. São os codecs que irão decodificar e possibilitar que você assista á vídeos  ou escute músicas em diversos formatos.  Em outras palavras, o codec é o que faz os códigos dos áudios e vídeos serem entendidos pelo computador.

Sendo assim,  é muito importante que seja informado dentro de cada “source” o container e os codecs usados nas mídias.  Na indicação do “container” e do “codec” utiliza-se o atributo “type” da seguinte maneira:

type=’MIME-type do container; codecs=”codec de vídeo, codec de áudio”’

Exemplo: um vídeo em Ogg, usando os codecs Theora e Vorbis, seu source deverá ser assim:

<source src=’video.ogv’ type=’video/ogg; codecs=”theora,vorbis”’>

Com esses novos recursos do HTML5, houve uma grande facilidade no uso e na publicação de mídias audiovisuais nas paginas web em plataformas variadas, facilitando o acesso do usuário a determinada página da web.