Goiânia, domingo, 1 de abril de 2012

Mostrar vídeo com HTML 5

Com HTML 5 é possível usar a tag <video> para incorporar às páginas arquivos nos formatos mp4, webm, ogg e ogv. Assim como no caso da tag para executar áudio, é preciso ter o arquivo disponível em dois ou mais formatos diferentes para que todos os navegadores consigam ler.

► Código

Basta substituir a URL em destaque pelo link do seu vídeo, já hospedado:

<video width="500px" height="375px" controls="controls" preload="preload"> <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" /> <source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" /> <source src="http://www.w3schools.com/html5/movie.webm" type='video/webm'/> </video>

Você pode colocar dentro da tag <video> as informações autoplay, para começar automaticamente, e loop, para repetir "toda a vida" enquanto o visitante permitir:

<video preload="preload" width="500" height="375" controls="controls" autoplay="autoplay" loop="loop">

Segue o código para vídeo em um único formato (e que por isso não vai funcionar em todos os navegadores):

<video width="500px" height="375px" preload="preload" controls="controls" src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"></video>

Exemplo de vídeo em formato mp4, que não será exibido no Firefox nem no Opera:

Exemplo de vídeo em formato webm, que não será exibido no Internet Explorer nem no Safari:

Exemplo de vídeo em formato ogv, que só funciona no Firefox e no Opera:

Saiba quais formatos funcionam em cada navegador:

Formatos:mp4oggogvwebm
Chromesimsimnãosim
Firefoxnãosimsimsim
Internet Explorer 9simnãonãonão
Operanãosimsimsim
Safarisimnãonãonão

De acordo com a tabela, você sempre precisará ter o arquivo no formato mp4 por causa do Safari e do Internet Explorer 9, que só leem ele. Como Firefox e Opera, os únicos que não leem mp4, são também os únicos que leem todos os outros três tipos, basta ter o vídeo em mais um formato para que a tag <video> funcione em todos os navegadores recentes. O código ficará assim:

<video width="500" height="375" controls="controls"> <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" /> <source src="http://www.w3schools.com/html5/movie.webm" type='video/webm'/> </video>

Até mais!

Imagem: www.quizgospel.com
Vídeos: W3Schools e Wikipédia
Informações: W3Schools

Related Posts Plugin for WordPress, Blogger...

Famosinhos da semana