Vídeo de produto na landing page: autoplay, tamanho e posição
Um vídeo de produto perto do topo da landing page mostra ao visitante o que você faz antes que ele leia uma palavra. Fazer o autoplay funcionar em todo lugar sem deixar a página lenta exige algumas escolhas específicas, que ficam fáceis quando você conhece as regras dos navegadores.
Escolha o formato
| Formato | Ideal para |
|---|---|
| Loop sem som com autoplay no topo | Um vídeo animado de 15 a 30 segundos que mostra o produto num relance. Sem som, sem controles, toca sozinho. |
| Poster com botão de play | Uma demo de 60 segundos a dois minutos com narração, em que o som importa e o visitante escolhe assistir. |
| Os dois | O loop no topo e a demo narrada mais abaixo na página. |
As regras de autoplay
A política do Chrome é curta: “o autoplay sem som é sempre permitido”, enquanto o autoplay com som exige coisas como uma interação anterior com o site (Chrome for Developers). O MDN descreve a mesma regra entre navegadores e observa que o Safari também precisa do atributo playsinline para o autoplay (MDN Web Docs). Então um loop no topo precisa ser muted e playsinline, e um vídeo com som deve esperar um clique. As orientações do Chrome também alertam para não presumir que o vídeo vai tocar e para não mostrar um botão de pausa quando ele não está tocando (Chrome for Developers).
O HTML
<video src="/product.mp4" poster="/product.jpg"
autoplay muted loop playsinline preload="metadata"></video>A imagem de poster aparece na hora enquanto o vídeo carrega, e preload="metadata" impede o navegador de baixar o arquivo inteiro antes de precisar dele. É a mesma marcação que esta página usa para o vídeo no card lateral.
Mantenha leve
- Use vídeo, não GIF. No exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB (web.dev).
- Remova a faixa de áudio de um loop sem som e redimensione o vídeo para o tamanho em que ele aparece. Com o ffmpeg, algo como
ffmpeg -i video.mp4 -an -vf scale=1280:-2 -c:v libx264 -crf 26 -preset slow -movflags +faststart hero.mp4costuma deixar um loop de 30 segundos com poucos megabytes. - Use uma plataforma de vídeo como Wistia, Vimeo ou YouTube para vídeos mais longos com som, assim você ganha streaming adaptativo e controles de graça.
Posição e duração
- Mantenha o título visível. O vídeo deve apoiar o título, não empurrá-lo para baixo da dobra num notebook.
- Use um quadro 16:9 e não corte nada importante nas larguras de celular.
- Mantenha o loop curto. Abaixo de um minuto é onde o engajamento é maior nos dados da Wistia (Wistia), e um loop com menos de 30 segundos raramente parece repetitivo.
Conseguindo o vídeo
Se você ainda não tem um, o Teasr cria um MP4 de 1920 x 1080 a partir da sua landing page em cerca de 10 minutos, a partir de 19,50 €, com a sua marca e as suas telas reais. Ele vem com música, que você pode tirar para o loop sem som com o comando acima.