DGmike

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>

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.

Vocês já devem ter ouvido falar no google charts. Com ele, é possivel criar ótimos gráficos para suas aplicações. Como por exemplo este aqui:

Bastando para isso, colocar uma imagem eu seu site com uma URL específica que você pode configurar facilmente.

Tá, você tem os dados e os converteu em um gráfico do google. E se você quiser um gráfico mais atraente? Talvez como este:

Talvez você não tenha ouvido falar ainda, mas o Open-Flash-Chart é o mesmo que o WordPress usa em sua tela de administração. O código não é tão complicado de entender e você ainda pode passar os parâmetros por URL. Ele também vem com um aplicador em PHP e em JavaScript para que você não se mate fazendo o código Flash que é uma meleca, sempre.

Aprofundando um pouco mais, ainda é possivel substituir o chart do google (para quem não tem javascript na máquina) para o Open-Flash-Chart facil, facil. Basta apenas um getElementById da vida, um replace e pronto você tem o seu chart turbinado. Este é um POST rápido, apenas uma explosão de idéias, então não vou codificar nada. Vou deixar vocês pensando na solução e quando eu precisar, irei desenvolver a solução e postar aqui mesmo

Estava vendo no deconcept um artigo muito interessante sobre a técnica de colocar flash em sites e o google conseguir ler o conteúdo, indexando-o. [update] Sei, o google agora indexa o conteúdo em flash, mas tenho bons motivos para não confiar nele ainda…

O interessante é o seguinte:

1. Os sitesearchs como o google e o Yahoo! indexarão normalmente pois o conteúdo é HTML normal.
2. Quem não tiver javascript verá o site em sua versão HTML, sem problemas.

Mas… cuidado! A pratica de SEO (Search Engine Optimization), se usado de forma incorreta, pode gerar dores de cabeça, como o banimento do Google. E não importa se você é famoso, o google não perdoa.

Enfim… vamos ao que interessa, eis o código:

<div id="flashcontent">
This is replaced by the Flash content if the user has the correct version of the
Flash plugin installed. Place your HTML content in here and Google will index
it just as it would normal HTML content (because it is HTML content!) Use HTML,
embed images, anything you would normally place on an HTML page is fine.
</div>

E, logo em seguida, o javascript.

var fo = new FlashObject("flashmovie.swf", "flashmovie", "300", "300", "8", "#FF6600");
fo.write("flashcontent");

Outro dia um amigo me pergunntou como fazer, em flash para criar um botão pause/play em flash. Com algumas linhas de código isso é possível facilmente. Bom, eu demorei um pouco pra responder porque não tinha nenhuma máquina pra poder trabalhar com Flash. Ainda mais porque formatei minha máquina, instalando Dual Boot (Ubunto/Windows) e ainda não consegui o driver de som para Windows :-/

Mas deixa isso pra lá. O video tutorial mostra um simples botão que da stop na linha de tempo quando estiver em movimento e continua quando está parado. Não há dois botões e sim apenas um, seu texto muda também conforme a ação. O fla pode ser baixado aqui.