HTML5 - Vídeo

Quando fazemos documentos HTML muitas vezes precisamos enriquecer nosso conteúdo e também muitas vezes já o uso de animações ou efeitos com Javascript Não basta, nestes casos devemos apelar para o conteúdo multimídia adequado às nossas necessidades, seja uma gravação, uma música ou um vídeo.
No caso de trabalhos multimídia, podemos usar áudio e vídeo com a especificação de HTML5, usando as novas tags para que não dependamos de idiomas ou plug-ins de terceiros.
Elemento de vídeo
HTML5 Contém suporte para a introdução de vídeos como parte do documento ou página que está sendo feita, sem a necessidade de usar Flash Player ou outro plug-in, aumentando assim a estabilidade do navegador, pois os plug-ins costumam ser a causa principal para o qual os navegadores falham, uma vez que esses complementos são constantemente atualizados e podem entrar em conflito com novos recursos ou melhorias.
O elemento Vídeo HTML5 Permite-nos incorporar vídeos sem necessitar da ajuda de um plug-in, com isso podemos reproduzir pequenos ou grandes vídeos nas nossas páginas e enriquecer o seu conteúdo.
Para usar o elemento de vídeo temos as seguintes características que devemos conhecer, para que possamos entender o código dos próximos exemplos.
Elemento: vídeo.
Atributos locais: reprodução automática, pré-carregamento, controles, loop, pôster, altura, largura, sem som,
src.
Deve-se notar que este elemento é totalmente novo em HTML5 portanto, pode não ser compatível com navegadores antigos.
Depois de conhecer o elemento e seus atributos locais, vamos ver um pequeno código sobre como implementar um vídeo:

 O vídeo de exemplo não pode ser exibido 

Como podemos ver, iniciamos uma tag de vídeo, definimos seus parâmetros de tamanho, a fonte e o src, que é onde encontramos o vídeo, neste caso deve estar na mesma pasta que o arquivo que contém o HTMLCaso o vídeo não possa ser visto, devemos mostrar uma mensagem e depois fechar a tag .Se navegamos pelas páginas com vídeo, veremos que tudo nos é muito familiar ao vermos este resultado; Vamos ver uma imagem de como nosso vídeo deve ser:

Como observamos, é uma implementação bastante limpa e funcional.
Já sabíamos quais eram os atributos locais que a tag de vídeo pode carregar, e até os colocamos em teste em nosso exemplo agora vamos ver o que cada um significa.
Reprodução automática - se colocarmos este atributo, o navegador começará a reproduzir o vídeo assim que puder.
preload - indica que o navegador deve ou não pré-carregar o vídeo, dependendo do que especificamos neste atributo.
controles - o navegador não mostrará os controles a menos que este atributo esteja presente.
ciclo - se estiver presente, o navegador reproduzirá o vídeo em um loop infinito.
poster - especifique uma imagem a ser exibida durante o carregamento do vídeo.
altura - indica a altura do elemento de vídeo.
largura - indica a largura do elemento de vídeo.
mudo - se presente, informa ao navegador que o vídeo deve ser reproduzido inicialmente sem volume.
src - especifique o caminho do vídeo a ser reproduzido.
Com isso terminamos este tutorial, onde tivemos nossa primeira abordagem ao elemento de vídeo e como usá-lo em um documento HTMLDesta forma, contamos com uma nova ferramenta para enriquecer nossas páginas.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo