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:
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:
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):
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: | mp4 | ogv | webm |
|---|---|---|---|
| Chrome | sim | sim | sim |
| Firefox | sim | sim | sim |
| Internet Explorer 9 | sim | não | não |
| Opera | não | sim | sim |
| Safari | sim | não | nã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:
Ou assim:
Até mais!
Imagem: www.quizgospel.com
Informações: W3Schools
Muito obrigado, Helen. Conhecimento bastante útil. ;) Forte abraço
ResponderExcluirHelen,e se eu quiser colocar os videos do youtube neste player?
ResponderExcluirFabricio, 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.
ExcluirOlá Helen, muito bom.
ResponderExcluirEu 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
Acredito ser possível sim, mas não usando apenas HTML. Sugiro buscar essa solução em sites de JavaScript e JQuery.
ExcluirHelen, 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?
ResponderExcluirIh! 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