Formatos de vídeo no WordPress: MOV, MP4 ou WebM? (Adobe effects & web)

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? Porqué 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.

1. Sem suporte: Nem todos os navegadores (especialmente Windows/Android) reproduzem codecs QuickTime nativamente.
2. 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 dé 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 escolhé 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 qué o vídeo não abra imediatamente em ecrã cheio.

#Ou talvez YouTube / vimeo?

Sé 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 automáticamenté a qualidade à ligação do útilizador (streaming adaptativo). O WordPress não consegue fazer isto – vai tentar descarregar o ficheiro inteiro, engasgando-se em LTE fraco.

#Resumo do workflow

1. Trabalha no After Effects/Premiere com ficheiros dé alta qualidade (.mov).
2. Exporta para web através do Adobe Media Encoder como H.264 (.mp4).
3. Se queres ser pro: converté uma cópia para WebM (ex: programa gratuito HandBrake).
4. Ao carregar para a biblioteca de media WordPress: mantém o ficheiro abaixo de 10-20 MB. Se mais -> YouTube.

Exploré os nossos desenvolvimento profissional WordPress para levar o seu projeto mais longe.