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
O atributo "source" nas tags audio e video - Kolaborativa

O atributo “source” nas tags audio e video

Pessoal, como podemos ver nas tabelas abaixo, nenhum dos formatos de áudio e de vídeo aceitam as tags &#60audio&#62 e &#60video&#62 em todos os navegadores de internet (ainda):

Atualizado em 03/10/2011

Formatos de áudio:

OGG ->

MP3 ->

Formatos de vídeo:

MP4:

OGV:

Então, surge um problema: como um desenvolvedor pode fazer um site com essas tags html5 que atenda a todos usuários possíveis de quaisquer navegadores?

O atributo “source” veio para resolver esse problema. Com ele, você pode permitir que mais usuários possam acessar o seu conteúdo. Veja o exemplo abaixo, seguido por seu código fonte:

Faça o download, caso não abra no seu navegador.

Vamos entender o código acima. Caso o usuário esteja visualizando em um navegador que não suporte o formato mp3, Será fornecido a ele o formato ogg. Caso ele esteja visualizando em um navegador que não suporte os dois citados acima (no caso o por exemplo), será fornecido ao usuário a opção de fazer o download da música.

Para os arquivos de vídeo, o raciocínio é o mesmo (use o :

Faça o download, caso não abra no seu navegador.

Façam os testes e boa sorte!

Confira aqui o Tutorial Completo HTML5 2012

Author Description

dukountra

There are 3 comments. Add yours

  1. 19th setembro 2010 | @hiper4tivo says: Responder
    Testei no Chrome e no Firefox. O player de audio e vídeo é bem mais bonito no Firefox!
  2. 19th setembro 2010 | @dukountra says: Responder
    O interessante é que no Firefox e no Opera não aparece esse "bug" (que dá no Chrome) em começar o áudio ou o vídeo com a barrinha de tempo congelada no meio. ;)
  3. 12th outubro 2010 | Dukountra says: Responder
    Acabei de testar nesse navegador no Ubuntu 10.10 e funcionou redondo

Join the Conversation