Category Archives: HTML5

jQPlayer – HTML 5 Video Player Plugin para jQuery

jQplayer logo

Há um bom tempo tinha desenvolvido um plugin para jQuery. Consiste em um plugin que facilita a vida do desenvolvedor para criar um video player html 5 de forma fácil e customizável o bastante de modo que permite:

  • alterar posição de controles;
  • selecionar os controles você quer ou não exibir;
  • suporte a legendas em formato srt;
  • suporte a fullscreen para os broswers que já têm a API fullscreen disponível (atualmente Chrome e Firefox);
  • customizar classes CSS dos controles gerados pelo plugin;
  • adicionar botões personalizados (ex.: links ou botões que executam métodos de sua escolha);
  • possibilidade de adicionar callbacks customizados para eventos padrões de um vídeo (ex.: play, pause, end);

Portanto, para você que precisa de versões mais específicas, de acordo com o cliente, jQPlayer é a melhor opção.

Veja a demo do jQPlayer ou acesse o repositório do jQPlayer no github.

Callback para CSS3 transitions

Para pessoas que estão acostumadas com o método animate do jQuery, que tem um callback, trabalhar com CSS3 pode ser um pouco complicado. Aqui vai uma dica rápida pra adicionar callbacks às suas transições.

Existe um método que tem nomes diferentes para Mozilla, webkit e Opera, respectivamente:

  • transitionend
  • webKitTransitionEnd
  • oTransitionEnd
element.addEventListener(
    'transitionend', //depende do browser (listado acima)
    function( event ) {
        alert( "Finished transition!" );
    },
    false
);

Bug com a tag video no iPad

Como muitos que trabalham com web, tenho trabalhado bastante em desenvolvimento para dispositivos móveis, a maioria dos projetos para iPad e iPhone. Nesse projeto em especial, estamos desenvolvendo uma versão HTML5 de um site de um cliente famoso. A geração do conteúdo é toda feita através de uma biblioteca estruturada em componentes e um desses componentes é um player de video em HTML cujo controle do video é todo feito através de outra biblioteca javascript que eu desenvolvi.

Durante o desenvolvimento, encontrei um bug muito estranho que ocorria somente no iPad. A princípio pensei que era um problema na geração dos HTML’s da biblioteca e fiquei alguns dias procurando o tal do problema, e nada…

A solução veio de um lampejo ao ver o XML que utilizamos para carregar o conteúdo. O XML tem todos os dados do vídeo, inclusive as duas versões de vídeo nos formatos suportados (ogg e mp4) pelos diferentes browsers que suportam a tag <video>. Ele montava o vídeo da seguinte forma:

<video width="650" height="250" data-quality="normal" poster="../_img/poster.jpg" preload="nopreload">
<source src="../_media/demo.ogg"></source>
<source src="../_media/demo.mp4"></source>
Your browser doesn't support this video.
</video>

No entanto, todos os dispositivos da Apple, vêm com um codec de vídeo diferente dos demais browsers, MPEG 4. Na tabela abaixo é mais fácil de entender a compatibilidade:

Fonte: http://www.w3schools.com/html5/html5_video.asp

No hora que eu vi o XML me dei conta que o video no formato ogg estava antes do video mp4 no código, simplesmente troquei de posição e funcionou, como você pode ver abaixo:

<video width="650" height="250" data-quality="normal" poster="../_img/poster.jpg" preload="nopreload">
<source src="../_media/demo.mp4"></source>
<source src="../_media/demo.ogg"></source>
Your browser doesn't support this video.
</video>

E essa foi a solução pra todos os meus problemas…