Colocando um Player de Vídeo com HTML5

Hoje vou ensinar como colocar um Player de Vídeo com HTML5, o que muda é a compatibilidade, que é mais complexa e mais trabalhosa e a conversão, o código é bastante simples e o Player é bem parecido com o do Áudio, com aquele estilo cinza com branco e azul, e com aquela mesma leveza do HTML5. O Player precisa executar com 3 formatos para poder funcionar em todos os navegadores. Mas para ficar mais fácil, podemos usar apenas um formato, ele só deixará de funcionar no IE e no Safari. Esse Código dispensa o uso de Players muito complicados e sofisticados, com um código simples e fácil e sem uso de javascripts pesados.
player video html5 Colocando um Player de Vídeo com HTML5   Tutorial Completo
CÓDIGO PARA USO:
<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 Vídeos na Tecnologia HTML5.
</video>
  • Substitua os Textos Negritados em Preto pelo Endereço do Vídeo no Formato Informado
  • O texto Negritado em Azul é a Largura da Caixa de Vídeo, e em vermelho, a altura.
  • O Texto em Roxo é a Mensagem que aparece quando o Navegador não é compatível.
CÓDIGO PARA 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 Vídeos na Tecnologia HTML5.
</video>

  • Substitua o Texto Negritados em Preto pelo Endereço do Vídeo no Formato OGG
  • O texto Negritado em Azul é a Largura da Caixa de Vídeo, e em vermelho, a altura.
  • O Texto em Roxo é a Mensagem que aparece quando o Navegador não é compatível.
Atenção: No modo mais simples, o Player não aparece no Internet Explorer e no Safari, mas em compensação, só precisamos usar um formato.
DEMONSTRAÇÃO:

COMPATIBILIDADE: 
Muitos Navegadores tem suas preferências de formato, por exemplo, o Internet Explorer não suporta o formato ogg e webm do HTML5, mas suporta o mpeg 4, já o Chrome suporta todos os formatos, abaixo vamos ver os formatos suportados por cada navegador:
Formatos:OGGMPEG 4WEBM
Chrome:simsimsim
Firefox:simnãosim
IE 9:nãosimnão
Opera:simnãosim
Safari:nãosimnão
Isso significa que se você usar apenas um formato, o Player não irá funcionar em todos os navegadores, é necessário o uso de todos os 3 formatos para que funcione em todos os navegadores. Muitos navegadores não suportam a tecnologia de Vídeo do HTML5, vamos ver a lista dos que não executam esta ferramenta:
  • IE 8 e seus antecessores.
  • Firefox 3.4 e seus antecessores.
  • Opera 10 e seus antecessores.
  • Chrome 4 e seus antecessores.
  • Safari 2 e seus antecessores. 
Isso significa que os navegadores que suportam a Tag Vídeo do HTML5 são: Internet Explorer 9, Firefox 3.5 e suas próximas versões, Opera 10.5 e suas próximas versões, Chrome 5.0 e suas próximas versões, e Safari 3.0  e suas próximas versões.
ONDE USAR O CÓDIGO?
Você pode usar o código onde quiser, pode usar em Laterais, em Postagens, no corpo do Blog. Para adicionar em uma Postagem, é só criar uma Postagem e colocar o código substituindo os textos Negritados pelos links do Vídeo. Para adicionar na sua Lateral, basta apenas você adicionar um gadget Javascript/HTML com o código para Uso, lembrando de substituir os Links Negritados. Para Adicionar no Corpo do Blog fica mais complicado, adicione entre <body> e </body>, lembrando que existe uma div para cada parte do blog, então é recomendável adicionar em Postagens e na Lateral.
Link para Postagem Original aqui

0 comentários:

O conteúdo deste blog/site pode e deve ser divulgado, conforme lei a 9.610/98 meus direitos estão assegurados, portanto eu permito a copia e reprodução gratuita, seja total ou parcial, não acarretando qualquer onûs financeiro aos interessados, porém, vedo o uso para fins lucrativos, toda reprodução para o público deve citar a fonte extraída, no caso o Técnico Linux - O Espaço do Software Livre e seja citada junto com um link para a postagem original, onde a referência deve estar numa fonte de tamanho igual ou maior a do texto, obviamente que os links citados não estão sujeitos ao mesmo termo. O conteúdo textual original desta página está disponível sob a licença GNU FDL 1.2.

Todas as marcas citadas pertencem aos seus respectivos proprietários. Os direitos autorais de todas as ilustrações pertencem aos respectivos autores, e elas são reproduzidas na intenção de atender ao disposto no art. 46 da Lei 9.610 - se ainda assim alguma delas infringe direito seu, entre em contato para que possamos removê-la imediatamente ou ainda lhe dar os devidos créditos.

Copyright © 2016 O Espaço do Software Livre