# Vídeo em loop: como as marcas fazem clipes que nunca acabam [Canonical HTML page](https://gradiently.design/pt-pt/guide/looping-video-background) Um bom loop passa o dia numa montra, fica atrás do título de um site ou gira por baixo de uma canção, e ninguém repara onde começa. Eis como as marcas o põem a trabalhar. ## The short version - Um vídeo em loop é um clipe curto que se repete de forma contínua, pensado para que a junção entre o fim e o início seja invisível. - As marcas usam vídeos em loop em cabeçalhos de sites, ecrãs de loja, publicações sociais, canvas de música, palcos de eventos e ecrãs de espera de transmissões. - Quanto mais devagar se move um loop, mais longo deve ser, porque o movimento lento torna a repetição mais fácil de detetar. - Um loop parece interminável quando nada nele acontece uma única vez: nem um flash, nem um corte, nem um objeto que marque o reinício. - Num site, um vídeo em loop deve estar sem som, reproduzir-se na própria página, ter uma imagem de pré-visualização e respeitar a preferência de movimento reduzido. Um **vídeo em loop** é um clipe curto feito para se repetir para sempre sem que ninguém veja onde recomeça. Para as marcas, é um dos formatos mais úteis que existem: um único ficheiro pode correr atrás do título de um site, num ecrã junto à caixa, por baixo de uma canção no Spotify ou atrás do cartão de espera de uma transmissão em direto. A técnica é simples de enunciar. Faz com que a última imagem dê diretamente na primeira, mantém o movimento lento e contínuo e nunca ponhas no clipe um acontecimento isolado, porque tudo o que acontece uma só vez passa a marcar o reinício. ## Onde as marcas usam um vídeo em loop Os loops servem em qualquer sítio onde as pessoas chegam num momento aleatório e ficam um tempo indeterminado. Ninguém começa a olhar para uma montra ao segundo zero, por isso uma história com princípio e fim tem a forma errada. Um loop não tem princípio, e é precisamente essa a ideia. | Local | Tamanho | Duração habitual | Som | | --- | --- | --- | --- | | Cabeçalho de um site | 1920×1080 | 10 a 30 segundos | Nunca | | Ecrã de loja ou de montra | 1920×1080 ou 1080×1920 | 20 a 30 segundos | Raramente | | Reel ou story do Instagram | 1080×1920 | 5 a 15 segundos | Opcional | | Publicação no feed | 1080×1350 | 5 a 10 segundos | Opcional | | Canvas do Spotify | 1080×1920 | 3 a 8 segundos | Vem da faixa | | Ecrã offline da Twitch | 1920×1080 | 20 a 30 segundos | Opcional | Pontos de partida, não regras. Os limites das plataformas mudam, por isso consulta as indicações de cada uma antes de publicares. Design de ecrã horizontal para a montra de um café, com um gradiente quente a mover-se devagar e um título parado Um loop horizontal para a montra de um café. A cor move-se; as palavras ficam quietas para se lerem do outro lado da rua. Ecrã de espera de transmissão com o texto já voltamos, sobre um gradiente calmo em loop Um ecrã de espera para uma transmissão. Pode passar dez minutos, por isso o movimento tem de ser calmo. Cada um destes locais tem as suas regras de tamanho e de som. [Vídeos de fundo em sites](https://gradiently.design/pt-pt/guide/video-background-website) trata do caso da web em pormenor, e [vídeos de fundo ambiente](https://gradiently.design/pt-pt/guide/ambient-video) aborda os loops longos e calmos que correm em ecrãs e transmissões. ## O que faz um loop parecer interminável Tecnicamente, um loop só precisa que o fim encontre o início. Na perceção, precisa de mais. As pessoas notam a repetição através de pontos de referência: o momento em que uma mancha brilhante passa por um canto, a imagem em que entra uma forma, uma cintilação de grão que cai sempre no mesmo sítio. Tira esses pontos de referência e um clipe de doze segundos pode parecer durar horas. - **Movimento contínuo.** Derivas, rotações e panorâmicas lentas que nunca param. Parar e arrancar cria uma batida que o olho consegue contar. - **Ciclos inteiros.** Tudo o que se move completa um número inteiro de voltas ou passagens na duração do clipe, e por isso termina exatamente onde começou. - **Várias camadas a velocidades relacionadas.** Um fundo que dá uma volta e um brilho que dá duas disfarçam a repetição um do outro. - **Sem acontecimentos isolados.** Nada de flashes, cortes, vinhetas de logótipo ou objetos que surjam uma vez. Se acontece uma vez, marca o reinício. - **Palavras paradas.** O texto que entra animado voltará a entrar animado em cada volta. Num vídeo em loop, deixa as palavras simplesmente estar lá. O pormenor ao nível da imagem de uma junção limpa, incluindo a última imagem duplicada que causa a maioria dos soluços, está em [vídeo em loop sem emenda](https://gradiently.design/pt-pt/guide/seamless-loop-video). ## Que duração deve ter um vídeo em loop A duração depende da velocidade e do tempo que as pessoas vão ficar a olhar. Um loop que alguém vê de relance durante três segundos pode ser curto. Um loop que passa numa parede toda a tarde tem de ser longo e lento o suficiente para que a repetição nunca se torne óbvia. Clipes mais longos dão ficheiros maiores, por isso equilibra os dois fatores. | Movimento | Tempo de visualização | Duração do loop | | --- | --- | --- | | Vivo, claramente em movimento | Um relance | 5 a 10 segundos | | Deriva constante | De alguns segundos a um minuto | 10 a 20 segundos | | Muito lento, ambiente | Minutos ou horas | 20 a 30 segundos | Quanto mais lento o movimento e quanto mais tempo as pessoas olham, mais segundos um loop precisa até a repetição deixar de se notar. [Que duração deve ter um loop de vídeo](https://gradiently.design/pt-pt/guide/video-loop-length) analisa este compromisso local a local, tendo em conta o tamanho dos ficheiros. ## Como fazer um vídeo em loop a partir de um design 1. **Parte do sítio onde vai passar** Escolhe primeiro o tamanho exato: 1920×1080 para um ecrã horizontal ou cabeçalho, 1080×1920 para stories, Reels e ecrãs verticais, 1080×1350 para uma publicação no feed. 2. **Escolhe uma camada em movimento** Normalmente o fundo. Um gradiente ou material em movimento é ideal, porque não tem arestas que denunciem o loop. 3. **Mantém as palavras paradas e calmas** Coloca o texto onde o fundo é mais sossegado. Se tiver mesmo de se animar, deixa o movimento dentro do fundo. 4. **Define a duração em ciclos inteiros** Garante que cada movimento completa um número inteiro de ciclos no clipe, para que a última imagem flua para a primeira. 5. **Exporta como vídeo e vê-o em loop** Exporta em MP4, ou WebM para a web, e reproduz em repetição no tamanho real durante pelo menos um minuto. Corrige tudo o que reparares duas vezes. Base quente para um loop de café: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)` Um loop funciona melhor num fundo como este: cor suave e sem arestas, que pode deslizar sem nunca mostrar uma emenda. É aqui que entra o Gradiently. Cada Mark é um fundo vivo de gradiente e material que já se move, por isso, com o Pro, um design construído sobre ele exporta-se como um loop sem emenda de 5 a 30 segundos, sem que tenhas de animar nada. Como não há dois Marks iguais, o loop da tua montra não será o mesmo fundo genérico da loja ao lado. ## Pôr um vídeo em loop num site Os navegadores só reproduzem automaticamente vídeo sem som, e os telemóveis precisam de `playsinline` para o manter na página. Acrescenta uma imagem de pré-visualização para que algo apareça antes de o vídeo carregar, e oferece primeiro o WebM, mais leve, com o MP4 como alternativa. ```html ``` Um vídeo em loop sem som e na própria página, com imagem de pré-visualização. Quem pede ao dispositivo menos movimento recebe a primeira imagem estática. Esta última regra importa. Há pessoas para quem o movimento constante é uma distração ou até um desconforto físico, e o sistema operativo avisa o navegador. [Preferência por movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion) explica como a respeitar como deve ser. ### Evitar - Um logótipo que entra animado no início de cada loop - Um salto visível no ponto em que o clipe recomeça - Movimento rápido atrás de texto pequeno - Um loop com som num site - Um GIF onde um vídeo resolvia ### Fazer - Um logótipo parado sobre um fundo em movimento - Ciclos inteiros, para que o fim encontre o início - Movimento lento com uma zona calma para as palavras - Sem som, na própria página, com imagem de pré-visualização - MP4 ou WebM, deixando o GIF para o email ## FAQ ### O que é um vídeo em loop? Um vídeo curto pensado para se repetir de forma contínua, com um fim que flui diretamente para o início, de modo que o reinício é invisível. As marcas usam-no em sites, ecrãs, publicações sociais e transmissões. ### Que duração deve ter um vídeo em loop? Os loops animados podem ter 5 a 10 segundos; os loops de fundo constantes ficam normalmente entre 10 e 20 segundos; os loops lentos para ecrãs que se veem o dia todo ganham com 20 a 30 segundos, para que a repetição seja mais difícil de notar. ### Qual é o melhor formato para um vídeo em loop? O MP4 reproduz-se em quase todo o lado e é a escolha segura para as redes sociais. Em sites, oferece primeiro o WebM e o MP4 como alternativa. Guarda o GIF para o email. ### Porque é que o meu vídeo em loop dá um salto no fim? Normalmente a última imagem repete a primeira, ou algo no clipe não completa um ciclo inteiro. Remove a imagem duplicada e faz com que cada movimento termine onde começou. ### Um vídeo em loop pode ter texto? Pode, mas mantém o texto parado. As palavras que entram animadas voltam a entrar animadas em cada loop, o que torna o reinício óbvio.