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.

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!

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.

<video src="nomedoarquivo.ogg" style="width:130px;height:130px" />

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

<video src="video.ogg" autoplay="autoplay" />

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

<script language="JavaScript"><!--
document.getElementsByTagName('video')[0].play()
--></script>

Ou com a jQuery…

<script language="JavaScript"><!--
$('video')[0].play()
--></script>

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

<video>
  <source src="foo.ogg" type="video/ogg"></source>
  <source src="foo.mov"></source>
</video>

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.

<video src="video.ogg">
Seu navegador não suporta a tag video, por favor mude para o Firefox... 
</video>

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.

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