nov 30

Tags Multimídia HTML5

Audio, Front-end, HTML5, Video Deixe um Comentário html5_banner

No artigo anterior falei um pouco sobre as novas tags de conteúdo da versão 5 da HTML, agora chegou a hora de falar um pouco sobre as tags multimídia, que permitem a incorporação de conteúdo em áudio ou vídeo sem a necessidade de instalação de nenhum plugin extra para isso.

Incorporando Áudio com HTML 5

Incorporar áudio com HTML5 é muito simples, tudo o que precisa ser feito é inserir o seguinte código na sua marcação:

<audio controls="controls">
	<source src="audio.ogg" type="audio/ogg" />
	<source src="audio.mp3" type="audio/mp3" />
	Seu Navegador Não Suporta Áudio em HTML5
</audio>

No código acima vemos a tag <audio> que indica a presença de um elemento de áudio na página, nesse caso a tag só contém um atributo controls, que quando incluído instrui o navegador a exibir os controlers desse vídeo, caso esse atributo seja omitido os controles não serão mostrados, além disso essa tag ainda pode receber outros atributos que não estão presentes nesse exemplo, são eles, “autoplay”, que caso incluído fará com que o áudio toque automaticamente com o carregamento da página (use com moderação), “loop” que indicará que ao final do áudio ele deve ser tocado novamente, e “preload” que indica que o arquivo de áudio deve ser carregado (apenas carregado, não tocado) juntamente com a página.

Dentro dessa tag <audio> existem duas tags <source>aonde são informados os caminhos para dois arquivos de áudio, um em .mp3 e um e .ogg, isso é necessário pois alguns navegadores só possuem suporte a um desses tipos de áudio, então para que sua aplicação funcione corretamente nos navegadore modernos é fundamental que você forneça o arquivo em pelo menos esses dois formados, cada um deles contém também o atributo type que indica o mime type desse arquivo.

Por fim, um texto informativo que será exibido somente caso o navegador não possui suporte a tag <audio> do HTML5 é utilizado para informar o visitante dessa limitação do seu navegador.

Incorporando Vídeo com HTML5

Incorporar vídeos em HTMl5 é bastante similar à incorporação de áudio, abaixo um exemplo de código para inserção de vídeo que será dvidamente explicado a seguir:

<video width="400" height="300" controls="controls">
	<source src="video.mp4" type="video/mp4" />
	<source src="video.ogg" type="video/ogg" />
	Seu Navegador Não Suporta Vídeo em HTML5
</video>

A diferença básica entre aúdio e vídeo, e que além dos atributos explicados anteriormente o vídeo deve conter os atributos que determinam a largura e a altura desse componente de vídeo (atributos width e height respectivamente), além disso existem dois outros atributos opcionais que podem ser utilizados, o atributo “poster” que deve receber como valor o endereço de uma imagem que será usada com demonstração do vídeo antes de seu início e o atributo “muted” que caso seja usado fará com que o vídeo toque sem o seu áudio.

Conclusão

A inclusão de áudio e vídeo em HTML5 é bastante simples, porém existem usuários que ainda utilizam navegadores sem suporte a essa tecnologia, por isso é sempre bom fornecer uma alternativa a utilização de HTML5 caso o áudio ou vídeo seja de muita importância para o conteúdo da página, com o tempo e a evolução dos navegadores será possível abondonar as tecnicas antigas e explorar ao máximo as capacidades da nova tecnologia.

Deixe uma resposta