Problema comum para motion designers e editores de vídeo que começam com websites: “Fiz uma animação bonita no Adobe After Effects, renderizei para .mov (na melhor qualidade!), carreguei no WordPress… e nada. Ecrã preto, erro, ou o ficheiro pesa 500 MB e demora uma hora a carregar.”
Porque é que isto acontece? Porque a internet opera por regras diferentes da pós-produção cinematográfica.
O problema com ficheiros .MOV
O formato .mov (contentor QuickTime) é padrão no trabalho criativo, especialmente em Macs. Frequentemente usa o codec ProRes ou vídeo não comprimido. Ótimo para arquivar e editar mais, mas terrível para navegadores web.
- Sem suporte: Nem todos os navegadores (especialmente Windows/Android) reproduzem codecs QuickTime nativamente.
- Tamanho: Um ficheiro ProRes pode pesar 1 GB por minuto. Na internet, apontamos para 5-10 MB.
Padrão html5: MP4 (h.264) e WebM
Para o vídeo funcionar em 99,9% dos dispositivos (do iPhoné ao frigorífico Android), precisas de usar padrões web.
1. MP4 com codec h.264 (avc)
Este é o “padrão de ouro”. A escolha mais segura.
- Funciona em todo o lado.
- Boa qualidade com tamanho pequeno.
- Como fazer: No Adobe Media Encoder, escolhe formato H.264 (não QuickTime!). Preset “YouTube 1080p Full HD” ou “Match Source - High Bitrate” é um bom começo.
2. WebM com codec vp9 (ou av1)
Formato aberto desenvolvido pela Google.
- Frequentemente 30-50% menor que MP4 com a mesma qualidade.
- Ideal para navegadores modernos (Chrome, Firefox).
Estratégia “video tag” em html5
Best practice (se tens de hospedar vídeo tu próprio, ex: como fundo da secção Hero) é fornecer ambos os formatos. O navegador escolhe o que prefere.
<video autoplay loop muted playsinline poster="thumbnail.jpg">
<source src="animacao.webm" type="video/webm">
<source src="animacao.mp4" type="video/mp4">
O teu navegador não suporta vídeo.
</video>Nota os atributos:
muted: Navegadores móveis requerem silenciamento para permitir autoplay.playsinline: Obrigatório no iOS (iPhone) para que o vídeo não abra imediatamente em ecrã cheio.
Ou talvez YouTube / vimeo?
Se o teu vídeo tem som, dura mais de 30 segundos e é conteúdo (ex: vlog, entrevista), não o carregues no WordPress. Usa YouTubé ou Vimeo.
- Poupas largura de banda do servidor.
- Estas plataformas ajustam automaticamente a qualidade à ligação do utilizador (streaming adaptativo). O WordPress não consegue fazer isto, vai tentar descarregar o ficheiro inteiro, engasgando-se em LTE fraco.
Resumo do workflow
- Trabalha no After Effects/Premiere com ficheiros de alta qualidade (
.mov). - Exporta para web através do Adobe Media Encoder como H.264 (.mp4).
- Se queres ser pro: converté uma cópia para WebM (ex: programa gratuito HandBrake).
- Ao carregar para a biblioteca de media WordPress: mantém o ficheiro abaixo de 10-20 MB. Se mais -> YouTube.
Veja os nossos serviços de desenvolvimento WordPress.
