Vídeo com html5
Até agora, nunca foi estabelecido um formato universal para mostrar vídeos numa página web. Hoje, os vídeos são mostrados através de um plugin, sendo que o mais usado é o Flash. No entanto, nem todos os navegadores têm os mesmos plugins, sendo necessário instalar aplicações complementares para fazer o trabalho. Com HTML5, será possível introduzir um formato universal de introdução de vídeo através do elemento <video>
Formatos de Vídeo
Os formatos de vídeo actualmente suportados são Ogg e MPEG-4. No entanto, devido ás constantes actualizações dos navegadores, não há uma lista de compatibilidades actual e concisa entre os browsers e os formatos de vídeos.
Como funciona?
Para introduzir vídeo em HTML5, tudo o que é necessário é:
O atributo controls é para introduzir o reproduzir, pausar, e controlo de volume.
Também será boa ideia incluir os atributos de largura e altura. Para navegadores que não suportam o elemento vídeo, insira um comentário dentro das tags <video>
O seu navegador não suporta o elemento video de HTML5.</video>
No exemplo anterior, usamos um ficheiro Ogg, que é suportado pelo Firefox, Opera e Chrome. Para que possa ver o vídeo no Safari, terá de estar em MPEG-4.
Felizmente, é possível introduzir mais de uma fonte do vídeo, pelo que podemos introduzir o vídeo em OGG e MPEG-4, para poder ser reproduzido nos navegadores citados. O Internet Explorer 8 não suporta qualquer um deles, mas está previsto que a sua versão 9 venha colmatar esta lacuna. Vejamos um exemplo:
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
O seu navegador não suporta o elemento vídeo de HTML5.
</video>
Atributos vídeo:
- autoplay – autoplay – Define se o vídeo irá ser exibido assim que estiver pronto.
- controls – controlos – Define os controlos que irão ser exibidos.
- height – pixeis – Define a altura do vídeo.
- loop – loop – Define se o vídeo irá ser repetido quando acabar.
- reload – preload – Define se o vídeo irá ser carregado ao mesmo tempo que a página irá ser carregada, e pronto para ser reproduzido. É ignorado se o atributo autoplay estiver activo.
- src – url – Define a fonte do vídeo, em um url.
- width – Define a largura do vídeo.
Áudio com HTML5
Tal como no caso do vídeo HTML, não houve até agora um formato universal para reprodução de áudio. A reprodução era feita através de plugins como Flash. Agora com HTML5 e a introdução do elemento
Formatos de Vídeo
De momento há 3 formatos suportados, Ogg Vorbis, MP3 e Wav, mas tal como no vídeo, não há uma tabela actual e concisa da relação entre o suporte dos navegadores e os formatos. Aquilo que é garantido é que o Internet Explorer 8 não suporta este elemento.
Como funciona?
Para introduzir o audio com HTML5, basta introduzir o elemento audio:
O atributo controls é para introduzir o reproduzir, pausar, e controlo de volume.
Deve também ser introduzido um comentário, dentro do elemento audio, para os navegadores que não suportarem este elemento.
O seu navegador não suporta a reprodução de audio HTML5.
</audio>
Mais uma vez, podem ser introduzidas várias fontes do conteúdo, para suporte de vários navegadores:
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
<source src="song.wav" type="audio/wav" />
O seu navegador não suporta reprodução de audio HTML5.
</audio>
Atributos áudio:
Atributo - Valor do atributo – Descrição
- autoplay – autoplay – Define se o áudio irá ser exibido assim que estiver pronto.
- controls – controlos – Define os controlos que irão ser exibidos.
- loop – loop – Define se o áudio irá ser repetido quando acabar.
- preload – preload – Define se o áudio irá ser carregado ao mesmo tempo que a página irá ser carregada, e pronto para ser reproduzido. É ignorado se o atributo autoplay estiver activo.
- src – url – Define a fonte do áudio, em um url.