Olá pessoal, na dica de hoje irei falar sobre uma das novas funcionalidades do html 5, iremos ver como adicionar em nosso site um HTML5 Video Player.
Com essa nova tag, é possível incorporar vídeos sem a necessidade de plugin algum, como o flash, quicktime, etc. Para isso, basta inserir o código mostrado na Listagem 1 que o próprio navegador se encarregará de exibir o vídeo ao usuário.
Listagem 1 : HTML5 Video Player
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="video.mp4" type="video/mp4" />
<!--Suportado em IE9, Chrome 6 e Safari 5 -->
O seu navegador não suporta a tag vídeo
</video>
</body>
</html>
Como podemos ver, o atributo controls adiciona os controles do player de vídeo, como play, pause, volume, etc.
Você também pode incluir uma largura e altura para o seu player de vídeo, isso ajuda a encaixá-lo no layout do seu site.
A tag <vídeo> aceita diversos<source>, permitindo que você insira mais vídeos em formatos diferentes, para que funcione em todos os navegadores, o navegador irá interpretar o primeiro que ele achar compatível, caso nenhum seja compatível, ele irá exibir o texto que escrevemos, avisando que aquele navegador não suporta a tag <vídeo>.
Na parte superior desse artigo você pode fazer o download do código fonte onde é possível ver o funcionamento do exemplo mostrado aqui, na prática.
Nota: Lembrando que para visualizar o exemplo em funcionamento é necessário estar usando IE9, Chrome 6 e Safari 5 ou superiores.
Espero que tenham gostado, um abraço e até a próxima dica.
