Come registrare un video di scorrimento di un sito

La maggior parte delle riprese venute male si perde prima che il registratore parta. Fai queste cose una volta e ogni ripresa migliora.

1. 1.Apri la pagina in un profilo nuovo o in una finestra privata, così estensioni, barra dei preferiti e account collegati restano fuori dall’inquadratura.
2. 2.Accetta o chiudi il banner dei cookie, chiudi la finestra della newsletter e riduci a icona il pulsante della chat. Tendono a ricomparire quando ricarichi, quindi fallo per ultimo.
3. 3.Scorri fino in fondo e torna su una volta prima di registrare. Così si caricano le immagini in differita e partono le animazioni di ingresso, e la ripresa non coglie sezioni caricate a metà.
4. 4.Nascondi la barra di scorrimento se ti dà fastidio. Nei DevTools, aggiungi html { scrollbar-width: none; } agli stili della pagina.
5. 5.Disattiva le notifiche. Un avviso che scivola in alto a destra rovina una ripresa altrimenti perfetta.

Decidi prima il formato finale, poi dai alla finestra del browser quella forma. Registrare tutto uno schermo 16:10 e ritagliarlo in 9:16 dopo butta via la maggior parte dei pixel e lascia un risultato sfocato.

• Per il 16:9, una finestra di 1280 × 720 o 1920 × 1080 (area del contenuto) è la soluzione più pulita.
• Per un video in formato telefono, apri i DevTools, attiva la barra degli strumenti dei dispositivi e scegli un telefono. La pagina serve allora il suo layout mobile, e registri solo quel viewport.
• Imposta lo zoom della pagina al 100%. Le pagine ingrandite disegnano il testo a dimensioni strane e sembrano sgranate una volta ridimensionate.

Uno schermo retina o ad alta densità registra al doppio dei pixel della finestra, e questo è un bene: puoi ridurre a 1080p mantenendo il testo nitido.

Su Mac, il registratore integrato (Shift ⌘ 5) e QuickTime scrivono file a frame rate variabile. OBS Studio, gratuito su macOS, Windows e Linux, registra a un frame rate costante a tua scelta. Su Windows registrano sia lo Strumento di cattura sia la Xbox Game Bar, ma OBS ti dà il controllo più ampio.

È il passaggio che decide se il video sembra professionale. La rotella del mouse si muove a scatti, il trackpad dà una spinta e poi scivola, e nessuno dei due mantiene una velocità costante per venti secondi. Perché le registrazioni dello scorrimento scattano entra nel merito delle cause.

La soluzione affidabile è far scorrere il browser da solo. Un breve script incollato nella console dei DevTools fa scorrere tutta la pagina su una curva di accelerazione in un tempo stabilito. Lo snippet completo, e come regolarne il ritmo, è in come far scorrere automaticamente un sito per un video.

1. 1

   Incolla lo script, ma non eseguirlo ancora

   Imposta al suo interno la durata che vuoi dare allo scorrimento.

2. 2

   Avvia il registratore

   Concediti un secondo o due di immobilità in cima. Puoi tagliarli dopo, e un primo fotogramma tenuto fermo rende una miniatura migliore.

3. 3

   Esegui lo script e non toccare nulla

   Non toccare il mouse o il trackpad finché la pagina non si è fermata. Qualsiasi input lotta contro lo script.

4. 4

   Ferma, poi taglia le estremità

   Taglia al primo e all’ultimo fotogramma di movimento, più l’attesa che vuoi da entrambi i lati.

Fatto bene, tutto questo richiede un quarto d’ora per ripresa, e un formato diverso significa un’altra ripresa. Se la pagina è pubblica, un renderer fa tutto a partire dall’URL: apre la pagina in larghezza desktop, tablet o telefono, toglie i pop-up, la legge a densità doppia e calcola il movimento a 24, 30 o 60 fps bloccati. Cambi un’impostazione ed esporti di nuovo invece di registrare da capo.