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://helenfernanda.uphero.com/videos/nina.mp4" type="video/mp4" /> <source src="http://helenfernanda.uphero.com/videos/nina.ogv" type="video/ogg" /> <source src="http://helenfernanda.uphero.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://helenfernanda.uphero.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://helenfernanda.uphero.com/videos/nina.mp4" type="video/mp4" /> <source src="http://helenfernanda.uphero.com/videos/nina.webm" type='video/webm'/> </video>

Ou assim:

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

Até mais!

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

7 comentários:

  1. Muito obrigado, Helen. Conhecimento bastante útil. ;) Forte abraço

    ResponderExcluir
  2. Helen,e se eu quiser colocar os videos do youtube neste player?

    ResponderExcluir
    Respostas
    1. Fabricio, só com HTML e CSS não tem jeito. Mas com JavaScript pode ser que alguém invente uma solução. Talvez você encontre por aí um dia. JavaScript não é minha especialidade.

      Excluir
  3. Olá Helen, muito bom.
    Eu gostaria de saber se é possível executar vários vídeos, tipo um playlist de vídeo, exemplo, terminando o primeiro ele já começa o segundo vídeo, o terceiro e aí vai até o final e depois começa a repetir.
    Grato,
    Marcelo

    ResponderExcluir
    Respostas
    1. Acredito ser possível sim, mas não usando apenas HTML. Sugiro buscar essa solução em sites de JavaScript e JQuery.

      Excluir
  4. Helen, eu estou com um "pequeno" problema, no Internet Explorer, a página trava, tenho 3 formatos de video, ogg, mp4 e webm. O código está correto, pois já o revisei várias vezes, incluindo outras fontes de informação para comparar. Você sabe o por que eu estou com este problema?

    ResponderExcluir
    Respostas
    1. Ih! Agora você me pegou. Já faz muitos anos que não uso Internet Explorer e nem Windows eu tenho em casa. Boa sorte na busca de uma solução.

      Excluir

Posts relacionados