DGmike

DGmike

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

  • Alice Andrade
  • Rafael Zamana
Você está aqui: dgmike » Navegadores » Chrome » Youtube e HTML5, agora ficou mais fácil

  • 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?

Youtube e HTML5, agora ficou mais fácil

Posted in Chrome, Firefox, Internet Explorer, Navegadores, Programação, flash, html, video by DGmike
Jul 26 2010
TrackBack Address.

Você se lembra quando inserir um video em uma página web era complicado? Você prescisava usar a tag embed e colocar um arquivo .wma que muitas vezes prescisava de um plugin da microsoft para conseguir rodar. Consequentemente, o player do tio Bill carregava no Internet Explorer e deixava o usuário furioso com o consumo de memória que ele consumia.

Apesar dos pesares, era relativamente fácil inserir um video com o html4 que tinhamos na época:

1
<embed autoplay="false" src="VIDEO.wma" width="50" height="50></embed>
Youtube, um player de videos online gratuito

Videos online, assim foi que o youtube conseguiu a maior audiência do mercado web do mundo

Ainda bem que o tempo passa e, com ele, a tecnologia só melhora. Inventaram o flash e com ele o player personalizado. Pouco tempo depois nascia um dos mais visitados sites do mundo: Youtube. Mas, infelizmente se tornaria mais complicado inserir um video no seu site. Agora era necessário usar o embed de flash, que não decorei até hoje.

1
2
3
4
5
6
<object width="640" height="385">
  <param name="movie" value="http://www.youtube.com/v/ID_VIDEO"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/ID_VIDEO" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

O pior veio quando, em alguns casos, o browser bloqueava o embed e precisou-se usar algum hack em javascript para conseguir “embebedar” o flash player com suas trocentas variáveis.

Com 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 aderiu a essa novidade.

Mas infelizmente nem tudo são flores na vida de Joseph Climber, e agora nos deparamos com uma pergunta básica: usar video com html5 ou embed de flash player. O caso é que, dependendo da máquina/browser do usuário, o html5 (que tem muito mais vantagens) simplesmente não funciona. O youtube está convertendo, pouco a pouco os videos em formato .flv para o formato .ogg aos poucos, então quando saber que está na hora de atualizar os videos do seu blog?

Para resolver o problema, o youtube decidiu tomar as redias e “inventou” uma nova forma de colocar os videos dele no seu site/blog: através de iframes. Veja como a sintaxe fica mais interessante.

1
2
3
4
<iframe class="youtube-player" type="text/html" frameborder="0"
    src="http://www.youtube.com/embed/VIDEO_ID"
    width="640" height="385"
></iframe>

Apenas trocando o ID do video. E voilà, seu video está em seu site sem você precisar se preocupar com atualizações de versão, compactibilidade, etc, etc.

Tagged as: bill gates, embed, Firefox, flv, google, google chrome, html, html4, html5, iframe, Microsoft, oembed, video, wma, youtube
Trackbacks
  • Tweets that mention Youtube e HTML5, agora ficou mais fácil | DGmike -- Topsy.com says:
    July 26, 2010 at 6:19 pm

    [...] This post was mentioned on Twitter by Michael Granados, Michael Granados. Michael Granados said: Youtube e HTML5, agora ficou mais fácil: o youtube decidiu tomar as redias e "inventou" uma nova forma de co… http://tinyurl.com/2uhqfvp [...]

Comments
  • RZamana:

    Incrivel o post.

    Mas sou obrigado a confessar uma coisa…

    Rever esse video foi o máximo tambem…

    =P

    Reply July 26, 2010 at 4:31 pm
  • Rodrigo Lacerda:

    Certeza que isso é coisa do HTML5? LoL
    Você apenas criou uma IFRAME para essa página: http://www.youtube.com/embed/h5DjjZipafA

    Criar iframes é possível há muito tempo e não tem absolutamente nada a ver com HTML5.

    Esse é um recurso criado pelo YouTube para tornar mais fácil e simples o código de inserir o vídeo na página.

    Reply July 30, 2010 at 6:15 pm
    • DGmike:

      Pois é, essa é a magia da coisa. Não é você quem vai decidir se quer mostar o filme usando html5 ou flash e sim o youtube, através do flash.

      Reply July 31, 2010 at 5:39 am
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