DGmike

DGmike

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

Você está aqui: dgmike » Tecnologia » video

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

4 Comments »
Tagged as: bill gates, embed, Firefox, flv, google, google chrome, html, html4, html5, iframe, Microsoft, oembed, video, wma, youtube

WordPress fora da pasta raíz

Posted in Programação, Tecnologia, Tutorial, php, video, video-tutorial, wordpress by DGmike
Apr 14 2009
TrackBack Address.

Já teve vontade de xingar o WordPress[bb] por criar aquele monte de arquivos na home do seu site, dificultando assim a organização dos seus arquivos dentro do servidor. Bom, neste vídeo eu explico como fazer para colocar o WordPress do seu blog[bb] para rodar dentro de uma pasta e não na raíz do projeto[bb]. Assim você ter uma organização melhor dos seus arquivos.

No Comments yet »
Tagged as: blog, instalação, sistema, site, wordpress

Vim, o melhor editor de textos do mundo

Posted in Programação, Tecnologia, Tutorial, video, video-tutorial by DGmike
May 25 2008
TrackBack Address.

Estava procurando informações sobre a aplicação “web py” e fui ver o que já havia sido feito com esse framework. Não é que me deparo com o jottit!? Nele podemos criar uma página web simples mas com todos os recursos necessários. Ótimos para escrever tutoriais ou anotações soltas sobre algo.

Bom resolvi começar a escrever sobre o meu editor de textos favoritos no Linux: Vim, o melhor editor de textos do mundo. Com ajuda de um host de imagens (picasa) e um host de videos (youtube) pode escrever o que eu queria. Quem quiser, pode dar uma lida e fique à vontade para comentar ou tirar dúvidas a respeito de tal editor que resolve muitos problemas no dia-a-dia de qualquer programador.

O tutorial está sendo escrito, então pode haver uma atualização/correção a qualquer momento, mesmo que você esteja lendo este post um ano depois de eu tê-lo publicado. ;D

1 Comment »

Video Tutorial: Enfeitando seus títulos com elementos à direita

Posted in CSS, Firefox, Programação, Semântica, Tutorial, tableless, video, video-tutorial, xHTML by DGmike
Nov 27 2007
TrackBack Address.

Fiz mais um video tutorial onde mostro como usar a propriedade float para decorar seu títulos com textos, imagens ou mesmo links à direita do título. Bastante interessante para quem está começando ou para quem está no meio do caminho mas ainda não havia pensado nisso. :D

Para quem quiser ver em um formato maior estou enviando enviei para o codeshow (o youtube tem mania de youtube.com.br
encurtar o tamanho do vídeo deixando quase impossivel enxergar as letras).

No Comments yet »

Tempo sobrando…

Posted in CSS, Cotidiano, Programação, Tutorial, video, video-tutorial by DGmike
Sep 28 2007
TrackBack Address.

Estava com um tempinho sobrando por causa de problemas com a rede aqui na empresa, então falei… vou fazer mais um vídeo para o codeShow o ersultado é este que vocês estão vendo aqui no blog, mas você também pode acessá-lo lá mesmo.

Descrição: Estava com um tempo sobrando no meu serviço: sem rede para manipular os arquivos e sem internet para pesquisar sobre programação. Resolvi fazer um mini vTuto (video tutorial) para demonstrar para vocês como implementar um simples menu “inline”.
O assunto já é um pocuo batido, mas sempre tem algém começando e que gostaria de ver como fazer este tipo de menu.
Ps.: Não me dediquei a xHTML restrito ou mesmo um CSS bem feito, testado em inúmeros browsers. Este é apenas um tutorial mostrando algumas propriedades do CSS.

2 Comments »
Next page »

Categorias

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

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 opera pagseguro palestra php plugin Programação python retorno automático simples site solução sql tableless Tecnologia Trabalho Tutorial twitter visie web wordpress

Arquivo

SlideSare

Últimos Posts

  • Vá com calma
  • Vírgula em html5 e css3
  • Youtube e HTML5, agora ficou mais fácil
  • Novo emprego!
  • Até mais e obrigado pela salada

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 opera pagseguro palestra php plugin Programação python retorno automático simples site solução sql tableless Tecnologia Trabalho 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