DGmike

DGmike

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

  • Alice Andrade
  • Rafael Zamana
  • 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?

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




1 Comment »
Tagged as: audio, desenvolvimento, Firefox, flv, internet, Internet Explorer, mp3, navegador, opensource, opera, padrões web, tableless, video, web

O opera passou no AcidTest3! Já?!

Posted in Cotidiano, Tecnologia by DGmike
Apr 04 2008
TrackBack Address.

Todos sabem que o Opera é o browser que mais segue bem os padrões web mas essa eu não esperava.

Logo após o anúncio que o Internet Explorer passava pelo Acid2 mostrando o smile lançaram o AcidTest3, que focava o maior parte em javascript. Alguns poucos meses depois o Opera já me aparece passando pelo tal teste.

Assim vou mudar de browser em pouco tempo. Ah, essa novidade é só para windows e Linux por enquanto, o pessoal fã do Steve vai ter que esperar um pouquinho mais. :D

Vi no Pinceladas da web

[Update] Acessei a internet para saber mais e fiquei sabend que o webkit (Mac) também passou pelo AcidTest3. Estou baixando a versão para Windows neste momento… :D

No Comments yet »
Tagged as: acidtest, browser, opera, padrões web

Categorias

  • Amigos  (16)
  • cases  (4)
  • Cotidiano  (71)
  • CSS  (19)
  • Design  (1)
  • Dia-a-dia  (30)
  • Diversão  (18)
  • eventos  (10)
  • extensions  (11)
  • flash  (3)
  • Games  (1)
  • html  (5)
  • icephp  (4)
  • Ilustração  (6)
  • Imagem  (8)
  • Inspiração  (5)
  • javascript  (35)
    • jQuery  (7)
    • yui  (2)
  • Não categorizado  (26)
  • Navegadores  (17)
    • Chrome  (4)
    • Firefox  (16)
    • Internet Explorer  (5)
  • pagseguro  (10)
  • php  (42)
    • PHP Conference  (3)
  • plugin  (3)
  • Programação  (43)
  • python  (5)
  • Semântica  (16)
  • sql  (9)
  • tableless  (18)
  • Tecnologia  (47)
  • Trabalho  (27)
  • Tutorial  (24)
  • Vetorial  (5)
  • video  (7)
  • 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 string tableless Tecnologia twitter visie web wordpress

Arquivo

SlideSare

Últimos Posts

  • [QuickPOST] Vagas de emprego
  • Dados de teste
  • Aprendendo com o técnico: quanto cobrar em um projeto web
  • Frete com PagSeguro: simples!
  • Palestra PagSeguro na Impacta

Amigos

  • Alice Andrade
  • Rafael Zamana
Powered by WordPress | “Blend” from Spectacu.la WP Themes Club