HTML5 video + UIWebView + autoplay uma combinação imprevisível

Imagem de
http://sensukho.blogspot.com.br/2012/08/
como-insertar-un-video-con-html5.html

Faz algumas semanas num trabalho pela MTI Studio precisamos colocar uma animação bem elaborada em uma apresentação HTML5 para iPad. A animação mostrava um raio de luz passando rodopiando e passando atrás de uma ampulheta. Nada que pudesse ser feito com as APIs de animação do JQuery por exemplo. Analisando a viabilidade dessa solicitação conclui que bastaria produzir um vídeo com a animação na proporção correta e embarcá-lo no HTML5 com a tag video configurar o atributo autoplay e mandar esconder os controles. Como iria embarcar em um container que não fui eu que programei não conseguia saber como a propriedade mediaPlaybackRequiresUserAction do UIWebView tinha sido configurada e por isso não podia prever se o autoplay tocaria numa boa.


Encomendamos o efeito com o @marcelo_azalim. Ele entregou ligeiro e ficou "duca". Fiquei seriamente impressionado com o tempo de resposta do cara por dois motivos: em primeiro lugar esse lance de animação complexa é bicho de 7 cabeças para mim, e além disso tudo que ele recebeu foi um jpg chapado do estado final da animação e uma descrição de como deveria ser. Só não mostro aqui porque o conteúdo é de distribuição restrita.

Voltando ao problema. A primeira solução que pensei para o problema do autoplay foi pegar o vídeo e converter para gif animado. Fiz isso com o Photoshop mas o resultado foi ruim, não consegui acertar com os parâmetros de compressão de um modo que o gif não perdesse muito da qualidade do vídeo original.

Então a saída foi utilizar o mesmo Photoshop para exportar em seqüência de jpg e baseado no taxa de quadros da exportação utilizar javascript para codificar substituir a imagem na taxa necessária.

Codifiquei um player precário mas o resultado ficou com qualidade muito superior ao obtido com gif animado. É claro que essa solução só foi possível porque as imagens jpg não eram baixadas via rede, elas vinham diretamente da sandbox do aplicativo hospedeiro se fosse necessário baixar pela rede certamente não daria certo. Testei em um iPad de primeira geração e o resultado foi melhor que o esperado (é sinceramente eu não acreditava que daria certo)!
Mas passado o susto e com o projeto já entregue resolvi pesquisar na net outras pessoas/projetos que algum dia já tiveram a pretensão de criar um player de seqüências de jpg e descobri esse projeto do Jacob Seidelin que eu gostaria de compartilhar:

http://blog.nihilogic.dk/2008/04/making-javascript-video-player.html

O player dos caras está mil anos-luz na frente do meu. Tem buffering, controles e um json próprio para a definição do vídeo e além disso trabalham com o jpg no formato codificado em base64 para tornar o json auto-suficiente.

Não fiz meus próprios testes mas avaliando pelos que estão disponíveis na página eu... tiro meu chapéu! É claro como "Completo mesmo é só o Bradesco" a audição de audio é uma funcionalidade que eles até exploraram mas que ainda não conseguiram resolver todos os problemas. Então o seu problema inclui áudio você tem duas opções: tirar o seu cavalinho da chuva ou ajudar os caras! Mas cuidado para sua cabeça não explodir!

Bons códigos as todos!

Comentários

Postagens mais visitadas deste blog

Curtir publicações automaticamente no Facebook. Por que isso não é uma boa idéia?