Как записать видео с прокруткой сайта

Большинство неудачных дублей испорчены ещё до запуска записи. Сделайте это один раз, и каждый дубль станет лучше.

1. 1.Откройте страницу в чистом профиле или приватном окне, чтобы ваши расширения, панель закладок и вход в аккаунты не попали в кадр.
2. 2.Примите или закройте cookie-баннер, закройте окно подписки на рассылку и сверните кнопку чата. После перезагрузки они обычно возвращаются, поэтому делайте это в последнюю очередь.
3. 3.Перед записью один раз прокрутите страницу до конца и обратно. Так подгрузятся ленивые изображения и сработают анимации появления, и дубль не поймает недогруженные секции.
4. 4.Скройте полосу прокрутки, если она мешает. В DevTools добавьте в стили страницы html { scrollbar-width: none; }.
5. 5.Отключите уведомления. Баннер, выехавший в правом верхнем углу, портит дубль, который иначе был бы идеальным.

Сначала определитесь с форматом итогового видео, а потом придайте окну браузера ту же форму. Если записать весь экран 16:10 и потом обрезать до 9:16, большая часть пикселей пропадёт, а результат выйдет размытым.

• Для 16:9 чище всего окно 1280 × 720 или 1920 × 1080 (область содержимого).
• Для видео в форме телефона откройте DevTools, включите панель устройств и выберите телефон. Тогда страница отдаст мобильную вёрстку, и вы запишете только эту область просмотра.
• Поставьте масштаб страницы на 100%. На увеличенных страницах текст отрисовывается в странных размерах и после масштабирования выглядит мягким.

Retina- или другой экран с высокой плотностью пикселей записывает в два раза больше пикселей, чем размер окна, и это хорошо: можно уменьшить до 1080p и сохранить чёткий текст.

На Mac встроенная запись (Shift ⌘ 5) и QuickTime пишут файлы с переменной частотой кадров. OBS Studio, бесплатная для macOS, Windows и Linux, записывает с постоянной частотой кадров, которую вы выбираете. В Windows записывать умеют и «Ножницы», и Xbox Game Bar, но больше всего контроля даёт OBS.

Именно этот шаг решает, будет ли видео выглядеть профессионально. Колесо мыши двигается щелчками, тачпад дёргается и катится по инерции, и ни то ни другое не держит ровную скорость двадцать секунд. Причины разобраны в руководстве почему запись прокрутки дёргается.

Надёжное решение — заставить браузер прокручивать самого себя. Короткий скрипт, вставленный в консоль DevTools, прокручивает всю страницу по кривой сглаживания за заданное время. Полный фрагмент кода и то, как подобрать темп, — в руководстве как настроить автопрокрутку сайта для видео.

1. 1

   Вставьте скрипт, но пока не запускайте

   Задайте в нём длительность, за которую должна пройти прокрутка.

2. 2

   Запустите запись

   Оставьте себе секунду-две неподвижности наверху. Потом их можно обрезать, а неподвижный первый кадр лучше подходит для обложки.

3. 3

   Запустите скрипт и уберите руки

   Не трогайте мышь и тачпад, пока страница не остановится. Любой ввод мешает скрипту.

4. 4

   Остановите запись и обрежьте края

   Обрежьте видео по первому и последнему кадру движения и оставьте с каждой стороны такую задержку, какая нужна.

Если делать всё как следует, на каждый дубль уходит минут пятнадцать, а другой формат означает ещё один дубль. Если страница публичная, рендерер сделает всё это по URL: откроет страницу в ширине десктопа, планшета или телефона, уберёт всплывающие окна, прочитает страницу с двойной плотностью и рассчитает движение с фиксированной частотой 24, 30 или 60 fps. Вы меняете настройку и экспортируете заново, а не перезаписываете.