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…