Pessoal, nesse post vou explicar a função mais esperada do HTML5, que é a de inserir vídeos no seu site, usando APENAS códigos HTML. Não é preciso mais ficar dependendo de plugins (entenda-se Flash) para colocar vídeos em seu site. Além disso, o tempo de carregamento do vídeo diminuirá, tornando o seu site mais dinâmico. Veja o exemplo abaixo:
Atualizado em 03/10/2011
<video id="meu video" src="meuvideo.mp4" poster="minhaimagem.jpg" width="400px" heigth="200px" controls autobuffer></video>
Alguns atributos da tag <video> são muito parecidos com os atributos da tag <audio>:
src: indica o endereço ou URL do arquivo do vídeo
loop: determina se o vídeo irá tocar repetidamente
controls: mostra os controles de vídeo (botão play/pause e indicador de tempo decorrido do vídeo)
autoplay: determina se o vídeo começará a tocar assim que o site for acessado
autobuffer: determina se o vídeo irá ser carregado em plano de fundo assim que o site for acessado
width e heigth: largura altura desejada para seu vídeo
poster: coloque o endereço da imagem que irá carregar caso o vídeo não carregue
Os atributos “loop”, “controls”, “autoplay” e “autobuffer” são booleanos, ou seja, basta escrever dentro da tag “<video>″ se você quiser umas de suas funções. No exemplo acima se eu quisesse que ela tocasse repetidamente, bastava escrever “loop” dentro da tag <video>.
Os atributos “autoplay” e “autobuffer” não podem ficar na mesma tag (ou o vídeo carrega em plano de fundo ou ele é tocado imediatamente).
Veja abaixo os navegadores que aceitam os seguintes formatos de vídeo:
MP4: 
OGV: 
MOV: 
Veja um exemplo de vídeo em HTML5 com o seguinte código fonte (use o ):
<video id="audiodeentrada" src="http://html5.x4ids.com.br/wp-content/uploads/videos/Planejar.flv" controls autobuffer width="416px" height="264px" poster="http://www.x4ids.com.br/imagens/os-principais-browsers.png"></video> <video id="audiodeentrada" src="http://html5.x4ids.com.br/wp-content/uploads/videos/Planejar.wmv" controls autobuffer width="416px" height="264px" poster="http://www.x4ids.com.br/imagens/os-principais-browsers.png"></video> <video id="audiodeentrada" src="http://html5.x4ids.com.br/wp-content/uploads/videos/Planejar.mov" controls autobuffer width="416px" height="264px" poster="http://www.x4ids.com.br/imagens/os-principais-browsers.png"></video> <video id="audiodeentrada" src="http://html5.x4ids.com.br/wp-content/uploads/videos/Planejar.mp4" controls autobuffer width="416px" height="264px" poster="http://www.x4ids.com.br/imagens/os-principais-browsers.png"></video> <video id="audiodeentrada" src="http://html5.x4ids.com.br/wp-content/uploads/videos/Planejar.ogv" controls autobuffer width="416px" height="264px" poster="http://www.x4ids.com.br/imagens/os-principais-browsers.png"></video> <video id="audiodeentrada" src="http://html5.x4ids.com.br/wp-content/uploads/videos/Planejar.avi" controls autobuffer width="416px" height="264px" poster="http://www.x4ids.com.br/imagens/os-principais-browsers.png"></video>
Se você visualizar somente a imagem com os ícones dos principais navegadores, quer dizer que o seu navegador não suporta esse formato de vídeo ou a tag <video>.
Confira aqui o Tutorial Completo HTML5 2012
Faça os testes você mesmo e até o próximo post!
Fala @Dukountra!
Tenho uma pergunta:
Tem como colocar opção FULL SCREEN?
Até mais, cara!
Oi @Thekingsize!
Infelizmente não há ainda um atributo padrão do HTML5 para colocar o vídeo em FULL SCREEN.
Mas o Chrome e o Firefox, disponibilizam plugins que permitem colocar a opção de FUUL SCREEN no vídeo.
http://bit.ly/ck1eEi (plugin do Chrome)
http://bit.ly/bMK6cE (plugin do Firefox)
Além disso, em breve será lançado o “Sublime Video”, um player desenvolvido para sites em HTML5 e que oferece o recurso de FULL SCREEN. Para mais informações sobre o lançamento desse player, veja:
http://bit.ly/8KVJkf
http://bit.ly/coU7l9
Valeu
Olá, com base em seu exemplo, quer dizer que se eu subir um video em .mp4 pra um servidor web e alterar-lo irá funcionar?
Por exe: fui fazer um teste com o seguinte script:
e o video nao aparece, só a imagen de erro!
Junior, não entendi o que vc quis dizer em alterar o vídeo. Além disso, em qual navegador vc fez o teste?
Eu testei a tag com um arquivo .mov no Safari e o próprio atributo “controls” disponibilizou um botão dedicado para full screen além dos botões padrão.
Olá, exite algum outro formato de vídeo que os navegadores mais utilizados (Chrome, Firefox e Opera) suportem? (fora os mencionados)
Oi Holisson. eu testei os formatos avi, flv, mpg e mpeg e não rodaram em nenhum dos três. O formato mkv rodou no Chrome e no Opera.
Olá, obrigadão gostei muito…
Mas tem algum comando para desligar o som ?
vlw
Como eu posso fazer para que o Vídeo que eu quero carregar seja compatível com todos os navegadores? Pois pelo q entendi eu só posso escolher um tipo de arquivo pro meu vídeo… É isso?
ou site que talvez possa ajudar é esse
http://www.longtailvideo.com/players/
Quais são os navegadores que suportam a tag ?
valeu pela dica Rodrigo
Oi Mundo,
Como eu disse no post
MP4:
OGV:
MOV:
Ainda não tem como um formato ser compatível com todos os navegadores em tags de html5. Mas com a tag “source” nós conseguimos fazer um quebra galho. Dá uma olhada no meu outro post http://html5.x4ids.com.br/o-atributo-source-nas-tags-audio-e-video/ na parte de vídeo.
Se for um embed do youtube eu coloco como eles disponibilizam lá normalmente ou tem uma forma apropriada para o html5?
Se vc pegar no youtube vc deve colocar como eles disponibilizam. Eles usam o recurso do html “iframe”, que permite visualizar na sua página um documento pertecente a outra página (no caso, é o youtube).
Para que vc possa utilizar o html5, vc tem que fazer download do vídeo e convertê-lo para o formato mp4 ou ogg (recomendo ogg, pois ele roda no chrome e no firefox e é um formato livre) e seguir conforme o tutorial acima.