Olá pessoal, estou aqui mostrando mais um exemplo de um player em HTML 5, a nova versão do HTML. Anteriormente, mostrei como inserir um player de áudio em HTML 5, e hoje iremos aprender como inserir um player de vídeo em HTML 5. Para quem não sabe como é o player, dê uma olhada:
Bom, como já falei, gosto destes players pois eles são práticos, carregam rápido, e são muito leves, pois não necessitam de nenhum script para o seu carregamento, isso já facilita muito para um blog quem tem muito pesado com muitos scripts. Vamos instalá-lo?
Para esse tipo de player(vídeo), existem dois tipos de código. Um é mais complicado, já o segundo é mais simples! Veja:
1º Código(mais complicado):
<video width="320" height="240" controls="controls"> <source src="ENDEREÇO DO VÍDEO EM MP4" type="video/mp4" /> <source src="ENDEREÇO DO VÍDEO EM OGG" type="video/ogg" /> <source src="ENDEREÇO DO VÍDEO EM WEBM" type="video/webm" />
Infelizmente, seu navegador não suporta o elemento de vídeo.
</video>
2º Código(mais simples):
<video width="320" height="240" controls="controls">
<source src="ENDEREÇO DO VÍDEO EM OGG" type="video/ogg" />Infelizmente, seu navegador não suporta o elemento de vídeo.</video>
Após escolher o código de sua preferência, faça as modificações. As partes de azul, é as larguras do vídeo. As partes em vermelho, é a url do(s) vídeos.
Lembrando que o formato do vídeo deve ser, de preferência, em OGG, pois é mais apropriada para a web. Mas nem todos os navegadores o suportam, veja a tabela abaixo de quais navegadores e seus respectivos formatos são suportados:
Formatos: | OGG | MPEG 4 | WEBM |
---|---|---|---|
Chrome: | sim | sim | sim |
Firefox: | sim | não | sim |
IE 9: | não | sim | não |
Opera: | sim | não | sim |
Safari: | não | sim | não |
Assim, você já sabe quais navegadores suportam o determinado formato. Lembrando novamente que você pode aplicar o player em sus postagens, sidebar, rodapé, e outros.
Veja um pequeno exemplo de como ficará seu player:
Adicione-o em seu blog! Lembrando que você terá que converte-lo. Use o aTubeCatcher. Deixe seu comentário, para expressar seu trabalho, ou suas dúvidas.
3 Comentários
mais depois de converter eu hospedo normalmente na internet ou precisa fazer de outro jeito?
18 de novembro de 2013 às 12:58eu gostei do player bem bonito ele, depois que eu converto o video no aTubeCatcher eu posso hospedar ele no youtube? ou tem algum lugar especifico???
18 de novembro de 2013 às 13:01vlw
2 de fevereiro de 2014 às 17:42Postar um comentário