Busca

Carregando...

domingo, 1 de abril de 2012

▶ Mostrar vídeo com HTML 5

Atualizado dia 07/06/2015.

Com HTML 5 é possível usar a tag <video> para incorporar às páginas arquivos nos formatos mp4, webm 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 exibir.

► Código

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

<video width="100%" controls="controls" preload="preload"> <source src="http://web.htmhelen.com/videos/nina.mp4" type="video/mp4" /> <source src="http://web.htmhelen.com/videos/nina.ogv" type="video/ogg" /> <source src="http://web.htmhelen.com/videos/nina.webm" type='video/webm'/> </video>

Em width você determina a largura do vídeo, em pixels ou porcentagem. Você também pode determinar a altura com height, mas basta colocar a largura que já terá a altura proporcional.

Controls serve para mostrar os controles do vídeo (iniciar, voltar, avançar, pausar, tela inteira) e preload serve para pré-carregar o vídeo antes mesmo do visitante clicar no botão play. Para desativar uma dessas funções, basta tirar essa parte do código.

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="100%" controls="controls" autoplay="autoplay" loop="loop">

Clique aqui para ver exemplos com autoplay, loop e sem controles.

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="100%" preload="preload" controls="controls" src="http://web.htmhelen.com/videos/nina.mp4" type="video/mp4"></video>

Exemplo de vídeo em formato mp4, que não será exibido 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 não será exibido no Internet Explorer nem no Safari:

Saiba quais formatos funcionam em cada navegador:

Formatos:mp4ogvwebm
Chromesimsimsim
Firefoxsimsimsim
Internet Explorer 9simnãonão
Operanãosimsim
Safarisimnãonão

De acordo com a tabela, o formato mp4 é o mais compatível. Para que o código funcione também no Opera, basta ter o vídeo em mais um formato, que pode ser .webm ou .ogv. O código ficará assim:

<video width="600" controls="controls"> <source src="http://web.htmhelen.com/videos/nina.mp4" type="video/mp4" /> <source src="http://web.htmhelen.com/videos/nina.webm" type='video/webm'/> </video>

Ou assim:

<video width="600" controls="controls"> <source src="http://web.htmhelen.com/videos/nina.mp4" type="video/mp4" /> <source src="http://web.htmhelen.com/videos/nina.ogv" type='video/ogg'/> </video>

Até mais!

Imagem: www.quizgospel.com
Informações: W3Schools

Artigos relacionados