De quantos formatos eu preciso para vídeo HTML5?

A tag <video> no HTML5 é algo ótimo. Ela possibilita o playback de vídeos nativos em todos os browsers atuais, ao invés de depender de plugins, como o Flash. Ela abre a porta para vídeos web em dispositivos que não suportam o Flash. E ela também suporta codecs que antes a web não suportava.

Mas se você estiver publicando conteúdo em vídeo, isso pode ser confuso. Para, de fato, suportar vídeo web, quantas versões de saída você precisa criar? WebM, Ogg e MP4? Mas e o iPhone, ou o Android? E versões de bitrates reduzidas/completas?

Não existe uma resposta única para essa pergunta, então, aqui temos um guia simples para te ajudar a escolher as saídas para vídeos em HTML5.

Quais formatos web?

Existem três formatos de vídeo que funcionam nativamente em alguns browsers. Infelizmente, nenhum formato funciona em todos os browsers, então você precisa de pelo menos dois se você quiser ter um suporte significativo para vídeo em HTML5.

Minimamente, você deve usar MP4 + H.264, com AAC ou MP3. O vídeo MP4 roda nativamente no Safari, Chrome, e IE9 (Vista/Windows 7). Também é sua melhor opção para exibir vídeos, caso não tenha Flash, e eles rodam nativamente em muitos dispositivos (iOS, Android, Blackberry, PSP, Xbox, PS3, etc). Utilize o H.264 High Profile para melhor qualidade, e o Baseline Profile, se você quiser que o mesmo vídeo seja executável em dispositivos móveis.

Além disso, use o WebM + VP8, ou Ogg + Theora com áudio Vorbis para outros browsers. O WebM funciona no Firefox (versões posteriores a 4), no Chrome (vcersões maiores do que a 6, ou o Chromium), e no Opera (acima da versão 10.60), e o Ogg funciona no Firefox (a partir da 3.5), no Chrome (a partir da 3), e no Opera (versões posteriores a 10.54).

Se você escolher um, ou outro, qual deles deve usar: Ogg ou WebM?

Na nossa opinião, o WebM é o futuro do vídeo livre. O VP8 é um codec melhor que o Theora, e só vai melhorar a medida que a comunidade de vídeo fique por trás dele. Ter o Google no barco também não atrapalha. Portanto, apesar de o Ogg ser suportado por mais browsers, recomendo que você use, minimamente, MP4 + WebM, ou Ogg. Melhor ambos.

Quais dispositivos móveis?

Mais uma vez, não existe um único perfil para dispositivos móveis que funcione em todos eles. Na verdade, existem mais padrões variáveis para vídeos mobile, do que para vídeos web. Mas, felizmente, algumas receitas bem selecionadas podem cobrir a maioria dos dispositivos móveis modernos.

1. A maioria dos dispositivos móveis modernos suporta MP4/H.264. Isso inclui toda a série iOS (iPhone, iPod, iPad, Apple TV, etc), a maioria dos dispositivos Android, telefones Blackberry modernos etc. Para a maioria deles, tenha o cuidado de utilizar o H.264 Baseline profile. Use o 640×480, ou um menor para iOS e Android, e 480×360, ou menos, para suporte ao Blackberry.

Note que o mesmo arquivo que roda em um iPhone pode rodar na web, via HTML5 (alguns browsers), ou Flash. Então, se você quiser reduzir versões, use o mesmo arquivo. Mas pode ser que você esteja preso com o Baseline Profile para a maioria de dispositivos, e o Main/High fazem uma grande diferença, então, utilizar versões separadas de saída pode ser uma boa idéia, se você quer uma melhor qualidade para cada dispositivo.

2. Use 3GP/MPEG4 para dispositivos móveis mais antigos. A maioria dos Blackberrys e alguns Androids também suportam 3GP, e ele geralmente roda em iPhone/iPod também (uma vez que o iOS roda MP4/MPEG-4 e o 3GP é apenas um sub-conjunto do MP4).

3. Espera-se que o WebM chegue para o Android e outras plataformas móveis em até dois anos. Mas, por enquanto, use MP4 para melhor qualidade no Android.

Recomendação: No mínimo MP4, 640×480 ou 480×360. No máximo, três versões MP4 (480×360, 640×480, 720p + Main profile) mais uma, ou duas versões 3GP (320×240 e talvez 176×144). Veja neste artigo mais sobre configurações específicas de codificação.

E múltiplos bitrates?

Você deve utilizar múltiplos bitrates para entregar vídeos maiores para usuários com conexões rápidas de internet, e vídeos menores para usuários com conexões mais lentas? Se seus usuários estiverem assistindo a vídeos de alta qualidade na web, então a resposta é, provavelmente, sim. Considere usar 2-3 tamanhos e bitrates para conseguir isso, por exemplo, um vídeo com 640×360, e outro com 1280×720.

E o streaming?

Este guia não leva o streaming de vídeo em consideração. RTMP streaming (Flash), Smooth Streaming (Silverlight), e HTTP Live Streaming (iOS), todos eles pedem por vídeos especialmente preparados. Isso está além do escopo deste artigo.

TL;DR

* O mínimo para vídeo HTML5 é MP4 + WebM ou Ogg (ou ambos), usando a versão MP4 para Flash fallback.
* Para suporte móvel, uma saída H.264/MP4 pode te levar longe. 2-3 permitem melhor qualidade e maior compatibilidade.

Recomendações

Aqui estão algumas sugestões de configurações.

1. Suporte a tudo

* HTML5, Flash, Mobile: MP4/H.264, Baseline profile, 480×360 ou 640×480;
* HTML5: WebM ou Ogg.

2. Aumente a compatibilidade

* HTML5, Flash: MP4/H.264, High profile;
* HTML5: WebM;
* HTML5: Ogg;
* Mobile: MP4/H.264, Baseline profile, 480×360 ou 640×480.

3. Faça funcionar em qualquer lugar

* HTML5, Flash: MP4/H.264, High profile;
* HTML5: WebM;
* HTML5: Ogg;
* Mobile: MP4/H.264, Baseline profile, 480×360, para maior compatibilidade;
* Mobile: MP4/H.264, Main profile, 1280×720, para dispositivos iOS mais recentes (iPhone 4, iPad, Apple TV);
* Mobile: 3GP/MPEG4, 320×240 e/ou 177×144, para "não-smartphones"*.

iMasters