Como usar a tag video HTML5
Alguns anos atrás, colocar um vídeo em uma página web exigia a utilização de tecnologias distintas do HTML, como por exemplo o Flash, mas com a chegada do HTML5, colocar um vídeo em uma página Web ficou muito mais fácil. Neste artigo irei demonstrar de forma básica como usar a tag video do HTML5.
Utilização básica
A utilização básica consiste em usar o atributo src, colocando como valor o diretório onde o vídeo está armazenado em seu servidor e o nome do vídeo, e também utilizando o atributo controls, que define que será exibido controles padrões de vídeo, como play, pause, volume, etc. Veja o exemplo a seguir:
<video src="video.mp4" controls></video>Essa é a forma mais simples de como colocar um vídeo em uma página Web.
Atributos
Conforme mencionado anteriormente, já conhecemos os atributos src e controls, mas o elemento <video> suporta diversos outros atributos, veja uma lista com alguns deles e as suas definições:
| autoplay | O vídeo vai ser reproduzido assim que possível. |
| controls | Coloca controles para o usuário controlar o vídeo, como play, pause, volume, etc. |
| height | Altura do vídeo em pixels. |
| loop | Define se o vídeo entrará em loop no final da sua reprodução. |
| muted | Indica que o vídeo vai começar sem volume. |
| preload |
Indica ao navegador qual é a melhor forma de proporcionar uma experiência ao usuário na hora de carregar vídeo na página, esse atributo aceita 3 valores: auto: O vídeo será carregado inteiro quando a página é carregada. metadata: É carregado apenas metadados quando a página é carregada. none: Indica que o vídeo não deve ser pré-carregado. |
| poster | Uma imagem que será mostrada como capa do vídeo até o usuário clicar no play para iniciar a reprodução do vídeo. |
| src | O diretório do vídeo em sua estrutura de arquivos. |
| width | Largura do vídeo em pixels. |
Veja um exemplo abaixo utilizando mais atributos, possibilitando um controle maior sobre o seu vídeo.
<video src="video.mp4" controls autoplay muted loop width="500" poster="capa.jpg"></video>Compatibilidade e formatos
Em um mundo perfeito todos os navegadores suportariam os mesmos formatos de vídeo, mas isso não é possível devido a algumas coisas, como por exemplo, as licenças de uso de um determinado formato de vídeo. Por isso nem todos os navegadores aceitam os mesmos formatos, os formatos aceitos com seus medias types são os seguintes:
| Formato | Media Type |
| mp4 | video/mp4 |
| webm | video/webm |
| ogg | video/ogg |
Para uma melhor compatibilidade com todos os navegadores, é sugerido a utilização da tag <source> ao invés de utilizar o atributo src para definir o diretório do vídeo, com isso é possível definir diversos formatos de vídeo, e caso um navegador não consiga executar aquele formato especifico, ele tentará executar o formato seguinte, conforme exemplo:
<video controls width="500" poster="capa.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
</video>
No pior dos casos, caso seu navegador não consiga reproduzir nenhum formato, você pode usar um HTML comum dentro da tag <video>, colocando por exemplo um texto explicando que não foi possível visualizar o vídeo, ou um botão de download, ou um link para o Youtube, enfim, fica na necessidade de cada um. Veja um exemplo:
<video controls width="500" poster="capa.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<p>Esse vídeo não pode ser reproduzido. Acesse o link <a href="exemplo.com.br/video">link</a> para fazer download do vídeo.</p>
</video>Conclusão
O HTML 5 trouxe muitas melhorias que facilitou o desenvolvimento Web, trouxe mais semântica na sua estrutura, e também trouxe diversos recursos que precisariam de um esforço muito maior para conseguir o mesmo efeito, e a tag <video> é umas dessas melhorias!
Gostou? Compartilhe com seus amigos!
