Como gravar um vídeo de rolagem de um site

A maioria das tomadas ruins já está perdida antes de o gravador começar. Faça isto uma vez e todas as tomadas melhoram.

1. 1.Abra a página num perfil novo ou numa janela anônima, para que suas extensões, a barra de favoritos e a sessão logada fiquem fora do quadro.
2. 2.Aceite ou dispense o aviso de cookies, feche o modal de newsletter e minimize o botão do chat. Eles costumam voltar ao recarregar, então faça isso por último.
3. 3.Role até o fim e volte uma vez antes de gravar. Isso carrega as imagens com carregamento lento e dispara as animações de entrada, para a tomada não pegar seções carregadas pela metade.
4. 4.Esconda a barra de rolagem se ela incomodar. No DevTools, adicione html { scrollbar-width: none; } aos estilos da página.
5. 5.Desligue as notificações. Uma notificação surgindo no canto superior direito estraga uma tomada que seria perfeita.

Decida primeiro o formato final e depois deixe a janela do navegador nesse formato. Gravar uma tela inteira em 16:10 e recortar para 9:16 depois joga fora a maior parte dos seus pixels e deixa o resultado borrado.

• Para 16:9, uma janela de 1280 × 720 ou 1920 × 1080 (área de conteúdo) é o mais limpo.
• Para um vídeo no formato de celular, abra o DevTools, ative a barra de dispositivos e escolha um celular. A página passa a servir o layout mobile, e você grava só essa área.
• Deixe o zoom da página em 100%. Páginas com zoom renderizam o texto em tamanhos estranhos e ficam sem nitidez depois de redimensionadas.

Uma tela retina ou de alta densidade grava com o dobro do tamanho em pixels da janela, o que é bom: dá para reduzir para 1080p e manter o texto nítido.

No Mac, o gravador nativo (Shift ⌘ 5) e o QuickTime gravam arquivos com taxa de quadros variável. O OBS Studio, grátis para macOS, Windows e Linux, grava a uma taxa de quadros constante que você escolhe. No Windows, a Ferramenta de Captura e a Xbox Game Bar gravam, mas o OBS dá mais controle.

Este é o passo que decide se o vídeo parece profissional. A rodinha do mouse anda em degraus, o trackpad dá um impulso e desliza, e nenhum dos dois mantém uma velocidade uniforme por vinte segundos. Por que gravações de rolagem travam explica as causas.

A solução confiável é fazer o próprio navegador rolar. Um script curto colado no console do DevTools rola a página inteira numa curva de suavização ao longo de um tempo definido. O snippet completo, e como acertar o ritmo, está em como rolar um site automaticamente para um vídeo.

1. 1

   Cole o script, mas não rode ainda

   Defina nele a duração que você quer que a rolagem tenha.

2. 2

   Inicie o gravador

   Deixe um ou dois segundos parado no topo. Dá para cortar depois, e um primeiro quadro parado rende uma miniatura melhor.

3. 3

   Rode o script e tire as mãos

   Não toque no mouse nem no trackpad até a página parar. Qualquer movimento seu briga com o script.

4. 4

   Pare e corte as pontas

   Corte no primeiro e no último quadro com movimento, mais o tempo parado que você quiser em cada ponta.

Feito direito, o processo acima leva quinze minutos por tomada, e um formato diferente significa outra tomada. Se a página é pública, um renderizador faz tudo a partir da URL: abre a página na largura de desktop, tablet ou celular, remove os pop-ups, lê a página em densidade dupla e calcula o movimento a 24, 30 ou 60 fps fixos. Você muda uma configuração e exporta de novo em vez de regravar.