O HTML5 disponibiliza de vários recursos para se inserir vídeos. Dessa forma, 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 irá diminuir, pois, existe uma tag específica para isso, tornando o seu site mais dinâmico.

Veja o exemplo abaixo:

<video id="meu video" src="meuvideo.mp4" poster="minhaimagem.jpg" width="400px" heigth="200px" controls autobuffer></video>

Veja os atributos da tag <video>:

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).

Abaixo podemos ver quais formatos funcionam em cada navegador:

–> mp4 e ogg.
–> não há.
–> ogg.
–> não há.
–> não há.

Os formatos wmv, avi, mov e flv não rodaram ou apresentaram problemas nos navegadores.

Veja abaixo como fica o seguinte código fonte no navegador:

<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.ogg" 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>.

Caso o desenvolvedor queira que o vídeo rode em mais de um navegador, pode-se usar o atributo “source”. A tag <video> segue o mesmo raciocínio da tag <audio>, como podemos ver abaixo:

<video controls autobuffer width="416px" height="264px">
		<source src="http://html5.x4ids.com.br/wp-content/uploads/videos/PLANEJAMENTO.ogg" />
		<source src="http://html5.x4ids.com.br/wp-content/uploads/videos/PLANEJAMENTO.mp4" />
		<p>Faça o <a href="http://html5.x4ids.com.br/wp-content/uploads/videos/PLANEJAMENTO.mp4">download</a>, caso não abra no seu navegador.</p>
</video>

Faça o download, caso não abra no seu navegador.

Se o navegador não conseguir rodar ogg, ele vai tentar rodar o mp4. Caso, não rode nenhum dos dois, será apresentada a opção de download.

Há também como aumentar a velocidade de carregamento do seu vídeo, usando os atributos <type> e <codecs>, os quais já dão informação para o seu navegador de qual codec precisa ser usado para carregar e rodar o vídeo. Veja o exemplo abaixo:

<type>: indica qual o formato do vídeo.
<codecs>: indica qual o codec que o seu navegador irá carregar para poder rodar o arquivo de mídia.

Segue abaixo os codecs dos principais arquivos de vídeo:

mp4 –> type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘
ogg –> type=’video/ogg; codecs=”theora, vorbis”‘