Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Como inserir vídeo no seu site usando o HTML 5

Como inserir vídeo no seu site usando o HTML 5

Pessoal, nesse post vou explicar a função mais esperada do HTML5, que é a de inserir vídeos no seu site, usando APENAS códigos HTML. Não é preciso mais ficar dependendo de plugins (entenda-se Flash) para colocar vídeos em seu site. Além disso, o tempo de carregamento do vídeo diminuirá, tornando o seu site mais dinâmico. Veja o exemplo abaixo:

Atualizado em 03/10/2011

Alguns atributos da tag &#60video&#62 são muito parecidos com os atributos da tag &#60audio&#62:

src: indica o endereço ou URL do arquivo do vídeo
loop: determina se o vídeo irá tocar repetidamente
controls: mostra os controles de vídeo (botão play/pause e indicador de tempo decorrido do vídeo)
autoplay: determina se o vídeo começará a tocar assim que o site for acessado
autobuffer: determina se o vídeo irá ser carregado em plano de fundo assim que o site for acessado
width e heigth: largura altura desejada para seu vídeo
poster: coloque o endereço da imagem que irá carregar caso o vídeo não carregue

Os atributos “loop”, “controls”, “autoplay” e “autobuffer” são booleanos, ou seja, basta escrever dentro da tag “&#60video&#62” se você quiser umas de suas funções. No exemplo acima se eu quisesse que ela tocasse repetidamente, bastava escrever “loop” dentro da tag &#60video&#62.

Os atributos “autoplay” e “autobuffer” não podem ficar na mesma tag (ou o vídeo carrega em plano de fundo ou ele é tocado imediatamente).

Veja abaixo os navegadores que aceitam os seguintes formatos de vídeo:

MP4:
OGV:
MOV:

Veja um exemplo de vídeo em HTML5 com o seguinte código fonte (use o ):


Se você visualizar somente a imagem com os ícones dos principais navegadores, quer dizer que o seu navegador não suporta esse formato de vídeo ou a tag &#60video&#62.

Faça os testes você mesmo e até o próximo post!

Confira aqui o Tutorial Completo HTML5 2012

Author Description

dukountra

There are 19 comments. Add yours

  1. 30th junho 2010 | @thekingsize says: Responder
    Fala @Dukountra! Tenho uma pergunta: Tem como colocar opção FULL SCREEN? Até mais, cara!
  2. 4th julho 2010 | admin says: Responder
    Oi @Thekingsize! Infelizmente não há ainda um atributo padrão do HTML5 para colocar o vídeo em FULL SCREEN. Mas o Chrome e o Firefox, disponibilizam plugins que permitem colocar a opção de FUUL SCREEN no vídeo. http://bit.ly/ck1eEi (plugin do Chrome) http://bit.ly/bMK6cE (plugin do Firefox)
  3. 4th julho 2010 | admin says: Responder
    Além disso, em breve será lançado o "Sublime Video", um player desenvolvido para sites em HTML5 e que oferece o recurso de FULL SCREEN. Para mais informações sobre o lançamento desse player, veja: http://bit.ly/8KVJkf http://bit.ly/coU7l9 Valeu
  4. 29th julho 2010 | Junior says: Responder
    Olá, com base em seu exemplo, quer dizer que se eu subir um video em .mp4 pra um servidor web e alterar-lo irá funcionar?
  5. 29th julho 2010 | Junior says: Responder
    Por exe: fui fazer um teste com o seguinte script: e o video nao aparece, só a imagen de erro!
  6. 29th julho 2010 | admin says: Responder
    Junior, não entendi o que vc quis dizer em alterar o vídeo. Além disso, em qual navegador vc fez o teste?
  7. 3rd dezembro 2010 | Daniel says: Responder
    Eu testei a tag com um arquivo .mov no Safari e o próprio atributo "controls" disponibilizou um botão dedicado para full screen além dos botões padrão.
  8. 10th abril 2011 | Holisson says: Responder
    Olá, exite algum outro formato de vídeo que os navegadores mais utilizados (Chrome, Firefox e Opera) suportem? (fora os mencionados)
    • 19th junho 2011 | @dukountra says: Responder
      Oi Holisson. eu testei os formatos avi, flv, mpg e mpeg e não rodaram em nenhum dos três. O formato mkv rodou no Chrome e no Opera.
  9. 28th junho 2011 | André says: Responder
    Olá, obrigadão gostei muito... Mas tem algum comando para desligar o som ? vlw
  10. 12th julho 2011 | Eduardo Chaves says: Responder
    Como eu posso fazer para que o Vídeo que eu quero carregar seja compatível com todos os navegadores? Pois pelo q entendi eu só posso escolher um tipo de arquivo pro meu vídeo... É isso?
    • 21st setembro 2011 | @dukountra says: Responder
      Ainda não tem como um formato ser compatível com todos os navegadores em tags de html5. Mas com a tag "source" nós conseguimos fazer um quebra galho. Dá uma olhada no meu outro post http://blog.kolaborativa.com/o-atributo-source-nas-tags-audio-e-video/ na parte de vídeo.
  11. 18th julho 2011 | Rodrigo Apokalipsce says: Responder
    ou site que talvez possa ajudar é esse http://www.longtailvideo.com/players/
  12. 28th julho 2011 | Mundo says: Responder
    Quais são os navegadores que suportam a tag ?
  13. 21st setembro 2011 | @dukountra says: Responder
    Oi Mundo, Como eu disse no post

    MP4:
    OGV:
    MOV:

  14. 25th janeiro 2012 | silvia says: Responder
    Se for um embed do youtube eu coloco como eles disponibilizam lá normalmente ou tem uma forma apropriada para o html5?
  15. 25th janeiro 2012 | @dukountra says: Responder
    Se vc pegar no youtube vc deve colocar como eles disponibilizam. Eles usam o recurso do html "iframe", que permite visualizar na sua página um documento pertecente a outra página (no caso, é o youtube). Para que vc possa utilizar o html5, vc tem que fazer download do vídeo e convertê-lo para o formato mp4 ou ogg (recomendo ogg, pois ele roda no chrome e no firefox e é um formato livre) e seguir conforme o tutorial acima.
  16. 19th março 2015 | Eduardo says: Responder
    estou querendo adicionar um player de video em meu blog, usando o html5, estou com problema, pois estou querendo pegar o link do youtube, mas não acho exemplo para o codigo abaixo. vc poderia me mostrar onde estou errando obrigado.

Join the Conversation