Webm com html5

Pensei em reformular o site para da minha empresa, descobri problemas no público.

Ultimamente, observei que ninguém lê. Tem tanto lixo na internet, que nossos olhos só procuram palavras-chave, os adolescentes mal conseguem ler 140 caracteres e interpretar. No facebook tem fdp postando imagem escrita com letras grandes porque ninguém lê o que é escrito normalmente na timeline.

Inventaram uma sigla pra textos longos TLDR (Too Long, Didn’t Read). Com tanta imagem, video, áudio, podcasts, radio online, tv online, pra que ficar lendo textos longos? O negócio é procurar um videozinho explicativo, uma imagem com gráfico, ou um podcast contando uma história.

Admito que também faço isso, ler textos longos na internet requer concentração, paciência, muita vontade de querer entender o que se passa. Muitas vezes está no primeiro parágrafo do texto de 200 parágrafos, já não concorda com o lixo escrito pelo autor e começa correr os olhos pelo texto furioso em busca de algum conteúdo que interessa.

Com essas conclusões, percebi que os sites corporativos, institucionais de empresas pararam no tempo. No máximo um flash porco, um blipblop no som, uma barra social com curtir do facebook, um retweet, um g+ etc.

O chefão que fecha negócio nos assuntos que sou especialista, geralmente é super ocupado, não tem tempo nem pra cagar em paz, a internet tá entupida de lixo. Texto pode deixar a mensagem com duplo sentido. Com esse perfil, nunca esse cara vai ler um site padrão completo no estilo “bem vindo”, “quem somos”, “produtos”, “fale conosco”.

Poucos vão ler, eu poderia escrever uma receita de tapioca recheada com carne-seca no “quem somos” no site da empresa que passaria despercebido.

Em uma botecada com minha esposa, pensado no novo site, novo conteúdo, já bem bêbado surge a epifania.

Fazer site com vídeo interativo! Grande coisa, já existe isso no youtube de monte. Mas não achei uma empresa que eliminasse seu site e colocasse videos interativos no lugar de conteúdo padrão atual.

Alguns dizem: “mas e as pessoas que não tem banda larga? Como vão ver o site? Vai perder clientes assim!”

Minha resposta: “Se o cliente em potencial não tem dinheiro para pagar uma banda larga na empresa ou na casa dele, não vai ter dinheiro para contratar meus serviços”. Indo mais longe, se o tal cliente em potencial não gosta de gastar com tecnologia, ainda usa o pentium3 que pagou R$ 5.000,00 na época com windows 98, não sou eu quem vai convencer esse dinossauro a mudar.

Vamos ao que interessa. Criei esse post por causa da luta com os lixos de html5.

Fiz roteiro, fui em estúdio, contratei ator, gravamos tudo. Com os videos na mão, começou a brincadeira.

Escolhendo o codec:

Navegando por aí, vai ver que tem tabelas explicando onde roda o que. Logo de cara eu ignorei o IE. Já que só o IE9 roda vídeo, e só no formato h264. Vou testar o google chrome frame para não se preocupar com IE.

http://www.youtube.com/html5

Optei pelo container webm, que já roda no firefox a partir do 4, Opera, no chromium e google chrome. A compressão fica boa, é aberto e o tio Google tá apoiando total. Inclusive comprou a empresa que cuidava do webm e arreganhou a documentação e fonte.

Editei e salvei os pedaços usando o Pitivi no ubuntu no formato webm.

Html5, tag video no portal w3cschools.com:

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” />
Your browser does not support the video tag.
</video>

Modifiquei um pouco, coloquei outras tranqueiras, aproveitei o evento “onended” para disparar javascripts.

<video width=”320″ height=”240″ autoplay=”autoplay” onended=”funcaoFromHell();”>
<source src=”movie.webm” type=”video/webm” />
</video>

Testando no chromium, no firefox, tudo ok funcionando localmente com file:///home/nils/video/blablabla.html

Quando coloquei em produção, a surpresa… o video não funcionava. Em http://www.minhaempresa.com.br/minhapagina.html só funcionava na última versão do chromium ou do google chrome. Firefox não funcionava.

Caçando por aí, achando que era bug do firefox, estudando os html5 perdidos por aí, descobri que faltava alguma coisa no cabeçalho do arquivo para avisar o firefox que é um video.

Quando eu acessava http://www.minhaempresa.com.br/meuvideo.webm pelo firefox, ele pedia para salvar. Não tocava automaticamente igual quando era local em file://

Pensei em usar pilantragem no php, para usar a função head com content_type ou algo do tipo. Mas fazer o server sofrer com load de videos em memória ram só para mudar o cabeçalho é muito porco.

Solução simples, editar o .htaccess que fica no servidor apache, com mod_rewrite.

<IfModule mod_rewrite.c>
AddType video/ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4
</IfModule>

No final fiquei um pouco assustado com o chrome. Ele se virou pra funcionar, e o firefox não. Se o chrome deixar programadores editar html e javascript porcamente desconsiderando alguns padrões o chrome será o IE do futuro.

Jquery draggable droppable resizable

Este foi um teste para implementar em um projeto ultra-secreto com jquery e jquery-ui. Já que levei uma surra pra fazer com javascript, então resolvi aprender jquery. Impressionante a facilidade.

No exemplo estou usando as apis hospedadas no google, mas eu baixei as minhas próprias para brincar localmente.

Só com esses poucos códigos em javascript consegui tudo o que eu queria, sendo que na minha versão anterior eu escrevi muitas linhas e várias bibliotecas. Foi tudo pro lixo, já que o jquery faz tudo bem melhor, funciona em varios navegadores e o código fica muito mais limpo e legível.

Isso seria algo como “arrastar um produto de uma loja virtual para seu carrinho de compras”. Ou no meu caso, manipular componentes de um form, odeio fazer form então estou montando um robô que faça isso por mim.

Mas com um pouco de criatividade, este recurso do jquery é muito interessante.

—-início—-

<!DOCTYPE html>
<html>
<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type='text/javascript'>
function get_tudo(obj){
alert("obj id: " + obj.attr("id") +"\n"+'x: ' + obj.css("left") + ' / y: ' + obj.css("top") + "\n"+"width: " + obj.css("width") + " height: "+ obj.css("height"));
}

$(document).ready(function(){
$("#div_drag").draggable();
$("#div_drag").resizable({
stop: function(event, ui) {get_tudo(ui.helper); }
});
$("#div_drop").droppable({
drop: function(event, ui) { get_tudo(ui.draggable); }
});
});
</script>

</head>
<body style="margin: 0px;">
<div id="div_drop" style="position: absolute; top: 100px; left: 0px; width: 800px; height: 500px; background-color: #0f0">
<div id="div_drag" style="position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; background-color: #00f">
</div>
</div>
</body>
</html>

—-fim—-