Comment enregistrer une vidéo de défilement de site web

La plupart des prises ratées le sont avant même de lancer l’enregistreur. Faites-le une fois, et toutes vos prises y gagnent.

1. 1.Ouvrez la page dans un profil vierge ou une fenêtre de navigation privée, pour que vos extensions, votre barre de favoris et vos sessions ouvertes restent hors champ.
2. 2.Acceptez ou fermez le bandeau cookies, fermez la fenêtre d’inscription à la newsletter et réduisez le bouton de chat. Ils ont tendance à revenir au rechargement, alors faites-le en dernier.
3. 3.Faites défiler jusqu’en bas puis remontez une fois avant d’enregistrer. Cela charge les images différées et déclenche les animations d’entrée, pour que la prise ne tombe pas sur des sections à moitié chargées.
4. 4.Masquez la barre de défilement si elle vous gêne. Dans les DevTools, ajoutez html { scrollbar-width: none; } aux styles de la page.
5. 5.Coupez les notifications. Une bannière qui glisse en haut à droite gâche une prise par ailleurs parfaite.

Décidez d’abord du format de sortie, puis donnez cette forme à la fenêtre du navigateur. Enregistrer tout un écran en 16:10 pour le recadrer ensuite en 9:16 jette la plupart de vos pixels et donne un résultat flou.

• Pour du 16:9, une fenêtre de 1280 × 720 ou 1920 × 1080 (zone de contenu) est la solution la plus propre.
• Pour une vidéo au format téléphone, ouvrez les DevTools, activez la barre d’outils des appareils et choisissez un téléphone. La page sert alors sa mise en page mobile, et vous n’enregistrez que cette fenêtre d’affichage.
• Réglez le zoom de la page sur 100 %. Une page zoomée affiche le texte à des tailles inhabituelles qui paraissent floues une fois mises à l’échelle.

Un écran Retina ou haute densité enregistre au double de la taille en pixels de la fenêtre, et c’est une bonne chose : vous pouvez réduire en 1080p et garder un texte net.

Sur Mac, l’enregistreur intégré (Shift ⌘ 5) et QuickTime écrivent des fichiers à fréquence d’images variable. OBS Studio, gratuit sur macOS, Windows et Linux, enregistre à une fréquence constante de votre choix. Sous Windows, l’Outil Capture et la Xbox Game Bar enregistrent tous les deux, mais OBS vous donne le plus de contrôle.

C’est l’étape qui décide si la vidéo a l’air professionnelle. Une molette avance par crans, un trackpad donne une impulsion puis laisse filer, et ni l’un ni l’autre ne tient une vitesse régulière pendant vingt secondes. Pourquoi les enregistrements de défilement saccadent détaille les causes.

La solution fiable consiste à laisser le navigateur défiler tout seul. Un court script collé dans la console des DevTools fait défiler toute la page sur une courbe d’accélération, en un temps donné. Le code complet, et la façon d’en régler le rythme, se trouvent dans comment faire défiler automatiquement un site pour une vidéo.

1. 1

   Collez le script, sans le lancer

   Réglez la durée qu’il contient sur le temps que doit prendre le défilement.

2. 2

   Lancez l’enregistreur

   Gardez une ou deux secondes d’immobilité en haut. Vous pourrez les couper plus tard, et une première image tenue fait une meilleure miniature.

3. 3

   Lancez le script et ne touchez plus à rien

   Ne touchez ni à la souris ni au trackpad avant que la page se soit arrêtée. La moindre action entre en conflit avec le script.

4. 4

   Arrêtez, puis coupez les extrémités

   Coupez à la première et à la dernière image du mouvement, plus le temps d’arrêt que vous voulez de chaque côté.

Fait correctement, tout ce qui précède prend un quart d’heure par prise, et un autre format veut dire une autre prise. Si la page est publique, un moteur de rendu fait tout cela à partir de l’URL : il ouvre la page à la largeur d’un ordinateur, d’une tablette ou d’un téléphone, retire les pop-ups, lit la page en double densité et calcule le mouvement à 24, 30 ou 60 fps fixes. Vous changez un réglage et exportez à nouveau au lieu de tout réenregistrer.