Inserindo player de vídeo em HTML 5 em blogs do Blogger

Compartilhar:
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:OGGMPEG 4WEBM
Chrome:simsimsim
Firefox:simnãosim
IE 9:nãosimnão
Opera:simnãosim
Safari:nãosimnã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.
► Postagens Relacionadas:

3 Comentários

Anderson Winck disse...

mais depois de converter eu hospedo normalmente na internet ou precisa fazer de outro jeito?

18 de novembro de 2013 às 12:58
Anderson Winck disse...

eu 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:01
Anderson Winck disse...

vlw

2 de fevereiro de 2014 às 17:42

Postar um comentário