DGmike

DGmike

Calma! não entre em pânico! Amanhã (talvez) tem novo post…

  • Alice Andrade
  • Rafael Zamana
Você está aqui: dgmike » Navegadores » Firefox » Firefox 3.1 irá suportar a TAG video e audio

  • Home
  • Guia Rápido jQuery
  • Códigos prontos
    • PHP: Função __auloload()
    • Classe sqlsimples e sql – PHP
    • Bancos, bancos e mais bancos…
  • PagSeguro
  • Artigos
    • JavaScript (parte 1)
  • Quem é dgmike?

Firefox 3.1 irá suportar a TAG video e audio

Posted in Firefox, Navegadores by DGmike
Nov 08 2008
TrackBack Address.

Vi no Ajaxian que o Firefox 3.1 irá suportar a tag video do html 5. Isso é um grande avanço para nós, que criamos páginas. Como qualquer desenvolvedor Web não vejo a hora de começar a escrever códigos novos e simples que deveriam ter sido inventados muito antes.

Nume viagem maluca pra São Paulo, há um tempo com meu amigo Zamana, nos deparamos com esse CrossFox Firefox. Fã é assim mesmo!

Nume viagem maluca pra São Paulo, há um tempo com meu amigo Zamana, nos deparamos com esse CrossFox Firefox. Fã é assim mesmo!

Hoje, para rodar um video nos navegadores você precisa usar uma embed complicada que muitas vezes não conseguimos decorar e precisamos procurar no google como resolver tal problema. E ainda parece que não roda mpeg direito.

<embed
    src="nomedoarquivo.wmv"
    controller="true"
    autoplay="true"
    width="320" height="240"
>

Já com a tag video podemos inserir videos nativamente ao firefox. Navegando um pouco, encontrei que a última versão do WebKit também suporta as tags video e audio, já o Opera suporta apenas a tag video e não a audio. Vale também lembrar que nenhum deles suporta essas funcionalidades por completo. Mas com o que já é suportado, podemos inserir videos facilmente:

<video src="nomedoarquivo.ogg" />

E obviamente, para alterar suas propriedades, o bom e velho CSS vem à calhar.

&amp;amp;amp;amp;lt;video src=&amp;amp;amp;amp;quot;nomedoarquivo.ogg&amp;amp;amp;amp;quot; style=&amp;amp;amp;amp;quot;width:130px;height:130px&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

Para que o video seja rodado automaticamente basta colocar o atributo autoplay.

&amp;amp;amp;amp;lt;video src=&amp;amp;amp;amp;quot;video.ogg&amp;amp;amp;amp;quot; autoplay=&amp;amp;amp;amp;quot;autoplay&amp;amp;amp;amp;quot; /&amp;amp;amp;amp;gt;

Ainda podemos manipular os videos por meio de javascript, assim.

&amp;amp;amp;amp;lt;script language=&amp;amp;amp;amp;quot;JavaScript&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;!--
document.getElementsByTagName('video')[0].play()
--&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;

Ou com a jQuery…

&amp;amp;amp;amp;lt;script language=&amp;amp;amp;amp;quot;JavaScript&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;!--
$('video')[0].play()
--&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;gt;

E se não bastasse, a tag video também pode receber uma lista de videos com o auxilio da tag source.

&amp;amp;amp;amp;lt;video&amp;amp;amp;amp;gt;
  &amp;amp;amp;amp;lt;source src=&amp;amp;amp;amp;quot;foo.ogg&amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;quot;video/ogg&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/source&amp;amp;amp;amp;gt;
  &amp;amp;amp;amp;lt;source src=&amp;amp;amp;amp;quot;foo.mov&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/source&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;/video&amp;amp;amp;amp;gt;

O fato é que vai ficar muito mais simples implementar videos e audios para nossos clientes (ha-ham…) nosos usuários. Pena que o Internet Explorer não roda direito. É simples fazer uma implementação que faça substituir a tag video por uma tag embed, alguém aí se disponibiliza a fazer? Mas como eu gosto de incentivar o usuário a “atualizar-se a um browser de verdade” prefiro fazer o seguinte.

&amp;amp;amp;amp;lt;video src=&amp;amp;amp;amp;quot;video.ogg&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;
Seu navegador não suporta a tag video, por favor mude para o Firefox... :D
&amp;amp;amp;amp;lt;/video&amp;amp;amp;amp;gt;

Claro que com uma mensagem mais amigável, mas não pretendo escrever o script que fará a gambiarra para o Internet Explorer simplesmente porque penso (lembrando que é minha humilde opinião) que se não dizermos ao usuário Seu internet explorer é um lixo, troque agora! [link para um browser melhor] ele nunca se mecherá para trocar (afinal, pra que trocar se roda tudo que preciso nele?!), mesmo que esse mecher leve-o a chamar alguém que saiba como fazer a troca.

Você ainda pode ver o video demo do pessoal da Mozilla Labs demonstrando que funciona mesmo!

[Nota]

Vale a pena lembrar que a tag source não é suportada por completo ainda e que a tag video e audio apenas suporta o formato ogg. Mas espero que suporte um dia o formato flv para videos e o famoso mp3. Mas, assim que sair a nova versão do Firefox implementarei com certeza essa tag. :D

Este pos foi escrito ao som de:

  • You Should Be Dancing – Bee Gees
  • Born To Be Wild – SteppenWolf
  • Smoke On The Water – Deep Purple
  • Money For Nothing – Dire Straits
  • Sheet Child O’ Mine – Guns N’ Roses




Tagged as: audio, desenvolvimento, Firefox, flv, internet, Internet Explorer, mp3, navegador, opensource, opera, padrões web, tableless, video, web
Trackbacks
  • Firefox 3.1 suporta as tags e do html5 | TidBits says:
    November 9, 2008 at 4:40 pm

    [...] hoje no DGmike que saiu uma matéria no Ajaxian dizendo que o Firefox 3.1 que deve sair em breve vai suportar as [...]

  • Youtube e HTML5, agora ficou mais fácil | DGmike says:
    July 26, 2010 at 8:54 am

    [...] a chegada do html5 tudo ficou mais fácil. Eu já havia explicado por aqui como se faz para inserir um video em formato .ogg em sua página. Isso foi um pouco antes do html5 estourar nas paradas de sucesso. Algum tempo depois o Youtube [...]

Comments
Leave a Comment
Click here to cancel reply.

Add Music To Your Comment

Clear All

Selected Songs (0): Allowed A Maximum Of 1

Categorias

  • Amigos  (16)
  • cases  (4)
  • Cotidiano  (73)
  • CSS  (20)
  • Design  (2)
  • Dia-a-dia  (33)
  • Diversão  (18)
  • eventos  (10)
  • extensions  (11)
  • flash  (4)
  • Games  (1)
  • html  (7)
  • icephp  (4)
  • Ilustração  (6)
  • Imagem  (8)
  • Inspiração  (5)
  • javascript  (36)
    • jQuery  (7)
    • yui  (2)
  • Não categorizado  (26)
  • Navegadores  (19)
    • Chrome  (6)
    • Firefox  (18)
    • Internet Explorer  (6)
  • pagseguro  (12)
  • php  (43)
    • PHP Conference  (3)
  • plugin  (3)
  • Programação  (46)
  • python  (5)
  • Semântica  (16)
  • sql  (9)
  • tableless  (18)
  • Tecnologia  (48)
  • Trabalho  (28)
  • Tutorial  (25)
  • Vetorial  (5)
  • video  (8)
  • video-tutorial  (5)
  • Windows  (4)
  • wordpress  (2)
  • xHTML  (23)

Tags

ajax artigo banco de dados biblioteca blog browser classe CSS data Design Dia-a-dia dinheiro evento eventos Firefox framework google html icephp internet Internet Explorer javascript jQuery loja mysql online opera pagseguro palestra php plugin Programação python retorno automático simples site solução sql tableless Tecnologia Tutorial twitter visie web wordpress

Arquivo

SlideSare

Últimos Posts

  • Vírgula em html5 e css3
  • Youtube e HTML5, agora ficou mais fácil
  • Novo emprego!
  • Até mais e obrigado pela salada
  • Api de teste do meadiciona.com

Tags

ajax artigo banco de dados biblioteca blog browser classe CSS data Design Dia-a-dia dinheiro evento eventos Firefox framework google html icephp internet Internet Explorer javascript jQuery loja mysql online opera pagseguro palestra php plugin Programação python retorno automático simples site solução sql tableless Tecnologia Tutorial twitter visie web wordpress

Conteúdo

  • Artigos
    • JavaScript (parte 1)
  • Códigos prontos
    • Bancos, bancos e mais bancos…
    • Classe sqlsimples e sql – PHP
    • PHP: Função __auloload()
  • Guia Rápido jQuery
  • PagSeguro
  • Quem é dgmike?
PagSeguro Powered by WordPress | “Blend” from Spectacu.la WP Themes Club