Vídeo com fundo transparente em sites (inclusive no Safari)

Quais navegadores suportam WebM transparente?

Navegadores Chromium e o Firefox reproduzem vídeo WebM com canal alfa. O Chrome respeita o alfa em WebM VP8 desde o Chrome 31 e também suporta VP9 com alfa, e o Edge herda esse comportamento do Chromium. O Firefox também renderiza VP9 com alfa corretamente.

O Safari é a exceção. Ele já reproduz WebM há algum tempo (suporte completo a partir do Safari 16 no macOS e do Safari 17.4 no iOS, segundo o Can I use), mas descarta o plano alfa. O vídeo toca, e todo pixel transparente fica opaco.

O suporte em dispositivos móveis é menos confiável. Nos testes de Jake Archibald em 2024, o Chrome no Android tinha um bug de alfa que, na época, já estava corrigido no Canary, e o Firefox no Android às vezes travava a reprodução. Teste em aparelhos reais antes de publicar.

Por que meu WebM transparente fica preto no Safari?

Porque o decodificador de WebM do Safari ignora o canal alfa do VP9. Os frames de cor são decodificados normalmente, mas os dados de transparência, que ficam separados, são descartados. Por isso o fundo aparece preto ou cinza em vez de mostrar a página por trás.

É uma falha conhecida do WebKit, não um problema no seu arquivo. Um patch para o bug 275908 do WebKit foi enviado como pull request #64837 em maio de 2026. A descrição diz que "os dados do plano alfa eram descartados durante o parsing, fazendo vídeos transparentes tocarem totalmente opacos". Em 12 de outubro de 2026, esse pull request ainda está aberto, então nenhuma versão lançada do Safari renderiza WebM transparente.

Hoje a solução não é outra configuração de WebM. É um segundo arquivo em um formato que o Safari renderiza com transparência: HEVC com alfa. Depois, você deixa cada navegador escolher o arquivo que consegue exibir corretamente, que é o que o markup abaixo faz.

Não recorra ao GIF para ter transparência. O GIF suporta apenas um índice de paleta totalmente transparente, então bordas suaves, sombras e anti-aliasing viram uma franja serrilhada, como mostra o comparativo acima.

O que é HEVC com alfa?

HEVC com alfa é a forma da Apple de armazenar um canal de transparência junto com vídeo H.265 (HEVC). A Apple lançou o suporte à reprodução no iOS 13, tvOS 13 e macOS Catalina, e o Safari nesses sistemas consegue reproduzi-lo em um elemento <video> comum.

O arquivo geralmente é um .mov QuickTime marcado como hvc1. A sessão "HEVC Video with Alpha" da WWDC19 da Apple explica a codificação com AVFoundation (AVAssetWriter, AVAssetExportSession) e VideoToolbox. O Compressor e o comando nativo avconvert usam o mesmo codificador do sistema.

Dois pontos práticos:

• Só dá para confiar nas plataformas Apple. O Chrome no macOS consegue decodificá-lo pelo decodificador do sistema (ele exibiu com transparência no nosso teste de outubro de 2026), mas o Chrome no Windows, Linux e Android e o Firefox não conseguem, e por isso você ainda precisa do WebM.
• Ele costuma ser maior. No teste de Archibald, o mesmo clipe tinha 1,1 MB em VP9 com alfa e 3,4 MB em HEVC com alfa. A proporção depende do conteúdo e das configurações, então meça seus próprios arquivos.

Um MP4 H.264 padrão não comporta transparência de jeito nenhum. Se uma ferramenta oferecer "MP4 transparente", verifique qual codec ela realmente usa.

Qual markup HTML funciona em todos os navegadores?

Use um único elemento <video> com dois filhos <source>. O arquivo HEVC precisa vir primeiro. Os navegadores usam a primeira fonte que conseguem reproduzir, e o Safari reproduz VP9; então, se o WebM viesse primeiro, o Safari o escolheria e perderia a transparência.

<video autoplay muted loop playsinline width="480" height="480">
  <source src="/media/mascot-idle.mov"
          type='video/quicktime; codecs="hvc1.1.6.H120.b0"'>
  <source src="/media/mascot-idle.webm"
          type='video/webm; codecs="vp09.00.41.08"'>
</video>

Por que cada atributo está ali:

• autoplay e muted: os navegadores permitem reprodução automática sem som. A política do Chrome diz: "A reprodução automática sem som é sempre permitida."
• playsinline: sem ele, o Safari do iPhone reproduz o vídeo em tela cheia em vez de dentro da página.
• loop: repete o clipe como um GIF.
• width e height: reservam espaço e evitam mudanças no layout.

O Safari reconhece a string do codec HEVC e para na primeira fonte. Nos testes de Archibald, Chrome e Firefox a ignoram e reproduzem o WebM. Se você também quiser uma alternativa sem transparência para navegadores muito antigos, pode adicionar um MP4 como terceira fonte, sobre um fundo igual ao da sua página.

Como codificar VP9 e HEVC com alfa?

Comece de um master que já tenha alfa, como uma sequência PNG ou um .mov ProRes 4444. Depois, gere um arquivo por formato.

WebM VP9 com alfa (qualquer plataforma)

ffmpeg -i master.mov -pix_fmt yuva420p -an \
  -c:v libvpx-vp9 -crf 45 -b:v 0 mascot-idle.webm

O formato de pixel yuva420p é o que preserva o plano alfa. Um CRF mais alto significa arquivo menor e qualidade mais baixa. O script de Archibald também usa codificação em duas passagens, o que ajuda a reduzir o tamanho para uma mesma qualidade.

MOV HEVC com alfa (somente macOS)

avconvert -s master.mov -p PresetHEVCHighestQualityWithAlpha -o mascot-idle.mov

O avconvert vem com o macOS e usa o próprio codificador HEVC com alfa da Apple; passe para ele um master com alfa que o macOS consiga ler, como um .mov ProRes 4444. No nosso teste de outubro de 2026, o resultado foi lido pelo AVFoundation com a transparência intacta. O codificador hevc_videotoolbox do ffmpeg também tem a opção -alpha_quality, mas os arquivos gerados com o ffmpeg 7.1.1 não abriram no AVFoundation no mesmo teste, então confira no Safari qualquer arquivo HEVC feito com ffmpeg antes de publicá-lo. O Compressor e o AVFoundation (AVAssetWriter) são os outros caminhos confiáveis.

Remova a faixa de áudio (-an) nos dois. Um arquivo sem som é menor e atende às regras de reprodução automática sem depender apenas do atributo muted.

Por que meu vídeo não toca automaticamente no iPhone?

O Safari do iOS só reproduz automaticamente um <video autoplay> quando três condições são atendidas. O vídeo não tem faixa de áudio ou está sem som. Ele está visível na tela. No iPhone, ele também precisa de playsinline; caso contrário, a reprodução só acontece em tela cheia. Essas regras vêm do texto "New video policies for iOS" do WebKit.

Trate a reprodução automática como um pedido, não uma garantia. play() retorna uma Promise que é rejeitada quando as regras não são atendidas, e o MDN recomenda tratá-la e oferecer um botão de play:

const video = document.querySelector("video");
video.play().catch(() => {
  // NotAllowedError: show a static poster or a play button instead.
  video.controls = true;
});

Sempre defina uma imagem poster igual ao primeiro frame. Ela aparece enquanto o vídeo carrega e quando a reprodução automática é recusada. Use um poster PNG ou WebP transparente para que a alternativa mantenha o efeito de transparência.

Como manter pequenos os arquivos de vídeo com fundo transparente?

Vídeo com canal alfa é mais pesado que vídeo opaco porque armazena um plano extra. Alguns hábitos ajudam a manter o tamanho sob controle:

• Mantenha os loops curtos. Um loop perfeito de 3 a 5 segundos costuma bastar para um estado idle ou attention.
• Dimensione para a exibição. Codifique no maior tamanho que você realmente exibe, muitas vezes de 480 a 720 px para um personagem inline, e não em 1080 px.
• Recorte bem justo. Área transparente vazia também consome bits.
• Ajuste a qualidade por formato. Aumente o CRF no WebM e reduza -q:v ou -alpha_quality no HEVC até as bordas começarem a falhar, depois volte um passo.
• Use lazy loading (carregamento sob demanda) abaixo da dobra com preload="none" e um poster.

Como referência, um loop idle de 4 segundos em 1080×1080 de um conjunto Charmotion tem 208 KB como MP4 opaco, 488 KB como WebM VP9 com alfa e 728 KB como MOV HEVC com alfa. O arquivo Rive do mesmo conjunto reúne as 17 animações em 40 KB.

E o Windows, a transparência desbotada no iPhone e a conversão de MOV para WebM?

Três problemas aparecem depois que o markup já funciona:

• Sem Mac para o arquivo HEVC. Os encoders da Apple rodam apenas no macOS. O FFmpeg 8.0 adicionou codificação com alfa no libx265, mas teste o resultado no Safari antes de depender dele. O Windows também exige as HEVC Video Extensions pagas da Microsoft só para reproduzir HEVC, e os navegadores ali não exibem transparência em HEVC de qualquer forma.
• Converter um MOV para WebM. O ffmpeg lê o alfa de arquivos ProRes 4444, mas nos nossos testes o ffmpeg 7.1.1 decodificou MOVs HEVC com alfa sem o canal alfa. Passe primeiro por ProRes 4444 com o avconvert.
• Transparência mais clara ou desbotada no iPhone. Desenvolvedores relataram que regiões transparentes clareiam o que está atrás delas no iPhone e no iPad, sem correção confirmada; confira as tags de cor do arquivo no Web Inspector do Safari e teste em um dispositivo.

Os comandos e detalhes dos três casos estão em MP4 transparente e HEVC com alfa.

Quando usar Rive em vez de vídeo com fundo transparente?

O vídeo com fundo transparente é a ferramenta certa para um único loop decorativo, um fundo de seção hero ou uma imagem de produto. Funciona sem JavaScript e é fácil de trocar depois.

Fica complicado quando o personagem precisa reagir. Cada estado vira mais um par de arquivos, e alternar entre eles significa trocar as fontes, o que pode causar piscadas ou travadas. Um arquivo Rive é vetorial e naturalmente transparente em um canvas, e sua state machine transita entre idle, loading, success e error dentro de um único arquivo.

A contrapartida é o player. O runtime web do Rive é um módulo WASM de aproximadamente 222 a 648 KB com compressão brotli, dependendo do pacote (tabela de tamanhos de runtime do Rive); o pacote canvas-lite 2.44.0 que usamos media cerca de 373 KB em brotli em outubro de 2026, carregado uma única vez por site. Esse custo compensa quando você exibe vários estados ou vários personagens, mas não para um único loop decorativo. Para um comparativo formato a formato, veja GIF vs WebM vs MP4 vs Lottie vs Rive.

Como adicionar um vídeo com fundo transparente a um site

1. Exporte um master com alfa. Renderize sua animação como sequência PNG ou como .mov ProRes 4444 com fundo transparente.
2. Codifique o WebM. Rode o ffmpeg com -pix_fmt yuva420p -c:v libvpx-vp9 e sem faixa de áudio para criar um .webm VP9 com alfa.
3. Codifique o MOV HEVC. No Mac, rode o avconvert com o preset PresetHEVCHighestQualityWithAlpha sobre um master ProRes 4444, ou exporte HEVC com alfa pelo Compressor ou pelo AVFoundation.
4. Adicione as duas fontes, HEVC primeiro. Coloque a fonte .mov antes da fonte .webm dentro de um único elemento <video> para que o Safari escolha o arquivo que ele renderiza com transparência.
5. Defina os atributos de reprodução. Adicione autoplay muted loop playsinline, largura, altura e uma imagem de poster transparente.
6. Teste em dispositivos reais. Confira o Safari no iPhone e no Mac, o Chrome no Android e no desktop e o Firefox, sobre fundos claros e escuros.

Perguntas frequentes

Um MP4 pode ter fundo transparente?

Um MP4 H.264 padrão não, porque ele não tem canal alfa. Use WebM VP9 para Chrome, Edge e Firefox e HEVC com alfa em um .mov para o Safari. O ProRes 4444 também carrega alfa, mas é um formato de edição e pesado demais para servir em uma página web.

O Safari vai suportar WebM transparente algum dia?

Talvez. Um patch do WebKit para alfa em VP9 (bug 275908, pull request #64837) foi enviado em maio de 2026 e ainda estava aberto em 12 de outubro de 2026. Até ele chegar a uma versão estável do Safari e as versões antigas caírem em desuso, continue servindo HEVC com alfa primeiro.

Preciso do parâmetro codecs no atributo type?

É altamente recomendado. A string de codec permite que cada navegador decida, antes de baixar qualquer coisa, se consegue de fato decodificar o arquivo, e é isso que faz a ordem das fontes funcionar de forma confiável. Os valores mais usados são hvc1.1.6.H120.b0 para o .mov HEVC e vp09.00.41.08 para o WebM VP9.

Um vídeo com fundo transparente prejudica a performance da página?

Pode prejudicar, porque vídeo com alfa é maior que vídeo opaco. Mantenha os loops curtos, codifique no tamanho de exibição, use preload="none" abaixo da dobra e forneça um poster. O Chrome pode considerar o poster do vídeo ou o primeiro frame renderizado como elemento de LCP, então um poster leve faz diferença se o vídeo estiver na sua seção hero.

Respostas rápidas deste guia

• O Safari suporta WebM transparente?
• Como adicionar um vídeo com fundo transparente a um site?
• O que é HEVC com alfa?
• Um MP4 pode ter fundo transparente?
• Por que meu vídeo não toca automaticamente no iPhone?

Fontes

• Alpha transparency in Chrome video, Chrome for Developers
• HEVC Video with Alpha (WWDC19 session 506), Apple Developer
• New video policies for iOS, WebKit
• WebKit pull request #64837: VP9 alpha support (bug 275908), WebKit on GitHub
• WebM video format, Can I use
• Video with alpha transparency on the web, Jake Archibald
• Autoplay guide for media and Web Audio APIs, MDN Web Docs
• Runtime sizes, Rive
• Faulty transparent video in iPhone browsers, Apple Developer Forums