Как снять видео для сайта на телефон: свет и звук

Чтобы на сайте появилось видео, не нужны ни студия, ни оператор. Современный телефон снимает достаточно чётко, чтобы ролик хорошо смотрелся и на компьютере, и на смартфоне посетителя. Решают другие вещи: свет, звук, кадр, длина и то, где видео будет показано.

В этой статье разберём по шагам, как снять видео для сайта на телефон: какой формат выбрать, как настроить камеру, где поставить свет, как записать чистый звук, как смонтировать ролик прямо в телефоне и подготовить файл к загрузке. Отдельно поговорим о видео для первого экрана сайта.

Какое видео нужно вашему сайту

Прежде чем снимать, решите, какую задачу решает ролик. От этого зависят длина, кадр и то, кто будет в кадре.

• Видеоприветствие. Вы обращаетесь к посетителю, представляетесь и предлагаете следующий шаг. 15–30 секунд. Сценарии: видеоприветствие на сайт.
• Видеовизитка. Рассказ о компании или специалисте: кто вы, чем занимаетесь, почему вам можно доверять. 30–45 секунд. Сценарии: видеовизитка для сайта.
• Видеоотзыв. Клиент своими словами говорит о результате. 20–40 секунд. Как попросить и что спросить: видеоотзывы на сайт.
• Видеообзор. Товар в руках и в работе: размер, материал, как пользоваться. 20–40 секунд. Сценарии: видеообзор на сайт.
• Видеообращение или анонс. Акция, запуск, мероприятие. 15–30 секунд. Сценарии: видеообращение на сайт.
• Фоновое видео. Атмосферные кадры без слов на первом экране: интерьер, процесс работы, природа. 10–20 секунд по кругу.

Кроме фонового видео, все эти форматы строятся одинаково: человек говорит в камеру. Поэтому дальше речь в основном о таком ролике.

Видео для первого экрана сайта: где его показать

Первый экран посетитель видит сразу, и видео там работает сильнее всего. Есть два способа его показать.

Фоновое видео в шапке

Ролик растягивается на весь первый экран под заголовком и кнопкой. Он задаёт настроение, но звука в нём нет, а текст поверх видео сложнее читать. Такое видео должно быть очень лёгким: тяжёлый файл замедляет загрузку как раз той части страницы, которую посетитель ждёт первой. Снимать его нужно горизонтально, а на телефоне посетителя он часто обрезается или заменяется картинкой.

Видео в углу экрана

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

Сравнение всех способов разместить видео: как добавить видео на сайт.

Вертикально или горизонтально

Ориентацию выбирайте по месту показа, а не по привычке.

• Вертикально (9:16) для видео в углу экрана, для историй и для мобильной версии сайта. Большинство посетителей сейчас приходит с телефона, и вертикальный ролик занимает экран целиком.
• Горизонтально (16:9) для фонового видео на первом экране и для ролика в блоке страницы на компьютере.

Если не уверены, снимайте вертикально и держите главное в центре кадра. В маленьком превью видеовиджета (130 на 180 пикселей) вертикальный кадр немного обрезается сверху и снизу, а горизонтальный — сильно по бокам. Не размещайте важное у самых краёв.

Настройки камеры телефона

Пять минут на настройку экономят час переснятых дублей.

1. Разрешение 1080p, 30 кадров в секунду. Для сайта этого достаточно. 4K и 60 кадров дают файлы в несколько раз тяжелее, а разницы на экране посетителя почти не будет. Видвиджет всё равно перекодирует ролик для показа в браузере.
2. Основная камера, если есть кому снимать. Она лучше фронтальной в темноте и даёт более честные цвета. Снимаете себя сами — фронтальная подойдёт, если хватает света.
3. Зафиксируйте фокус и экспозицию. На большинстве телефонов достаточно долго нажать на лицо на экране. Иначе камера будет «гулять» яркостью, когда вы двигаетесь.
4. Выключите HDR-видео, если ролик потом пойдёт на сайт. В части браузеров и программ такое видео выглядит блёклым или пересвеченным.
5. Включите стабилизацию, если снимаете с рук или на ходу. Для статичного кадра лучше штатив или стопка книг.
6. Протрите объектив и включите режим «Не беспокоить», чтобы звонок не прервал удачный дубль.

Свет: самое важное после звука

Телефон хорошо снимает при хорошем свете и плохо при плохом. Хорошая новость: хороший свет почти бесплатен.

• Встаньте лицом к окну. Мягкий дневной свет спереди — лучшее, что можно придумать. Окно за спиной превращает лицо в силуэт.
• Избегайте прямого солнца на лице: резкие тени и прищуренные глаза. В солнечный день отойдите от окна вглубь комнаты или задёрните тюль.
• Вечером поставьте настольную лампу или кольцевой свет чуть выше уровня глаз и сбоку от камеры. Выключите верхний свет другого оттенка, иначе лицо станет разноцветным.
• Фон светлее тёмного угла. Хорошо, если за вами видно рабочее место, интерьер или продукт, а не голая стена в тени.

Звук: что делает ролик профессиональным

Зритель простит не идеальную картинку, но выключит видео с гулом и эхом.

• Тихое помещение с мебелью. Шторы, ковёр и шкафы гасят эхо. Пустая комната с голыми стенами звучит как ванная.
• Телефон близко. Не дальше вытянутой руки. С трёх метров встроенный микрофон запишет больше комнаты, чем голоса.
• Петличный микрофон. Недорогая петличка к телефону — самое полезное вложение в видео для сайта. Её крепят на воротник в 15–20 сантиметрах от рта.
• Выключите кондиционер, вентилятор и уведомления. Фоновый гул почти не слышен при записи и очень заметен в наушниках зрителя.

Учтите, что в видеовиджете и в фоновом видео первые секунды посетитель видит без звука. Начинайте ролик с действия, которое понятно и без слов: улыбка и взмах рукой, товар в руках, кадр работы.

Кадр и поведение в кадре

• Камера на уровне глаз. Снизу вверх кадр выглядит неуверенно, сверху вниз — снисходительно.
• Смотрите в объектив, а не на экран. Тогда зритель чувствует, что вы обращаетесь к нему.
• Глаза на верхней трети кадра, над головой небольшой запас. В вертикальном видео в кадре помещаются плечи и руки: жестикулируйте, это оживляет речь.
• Говорите своими словами. Выучите план из трёх-четырёх пунктов, а не текст дословно. Читаемый с листа текст сразу слышно.
• Снимите три-пять дублей. Обычно лучший получается третий, когда вы уже освоились.

Длина и план ролика

Видео, которое посетитель не искал специально, смотрят недолго. Для видео на сайт ориентируйтесь на 15–45 секунд: это 30–90 слов при обычном темпе речи, около двух слов в секунду.

Почти любой короткий ролик для сайта укладывается в четыре шага:

1. Крючок (2–3 секунды): действие или вопрос, понятные без звука.
2. Кто вы (3–5 секунд): имя, компания или роль.
3. Польза (5–20 секунд): что получит зритель, один факт или пример.
4. Призыв (3–5 секунд): один конкретный шаг, который совпадает с кнопкой на сайте.

Готовые тексты на 15 и 30 секунд для разных задач собраны на страницах видеоприветствия, видеоотзывов, видеообзоров, видеообращений, видеовизитки и видео в кружке.

Монтаж на телефоне

Для короткого ролика сложный монтаж не нужен. Всё делается во встроенном редакторе галереи или в любом мобильном видеоредакторе.

• Обрежьте начало и конец: момент, когда вы нажимаете «запись» и тянетесь к телефону.
• Уберите паузы и оговорки, если склеиваете несколько дублей. Склейку можно прикрыть кадром продукта или процесса.
• Музыку ставьте тихо или не ставьте вовсе. Под речью она мешает разбирать слова, а чужая музыка может нарушать авторские права.
• Субтитры полезны для фонового видео и роликов в соцсетях. В видеовиджете звук включается, когда посетитель сам открывает ролик, поэтому субтитры там не обязательны.
• Не ставьте текст у краёв кадра. В разных местах сайта видео обрезается по-разному.

Экспорт и размер файла

Сохраняйте ролик в 1080p, 30 кадров в секунду. Минута такого видео на iPhone весит примерно 60 МБ в формате HEVC и около 130 МБ в H.264, на Android похоже. Ролик на 30–45 секунд обычно укладывается в 30–100 МБ.

Для видеовиджета подойдут файлы MP4, MOV, AVI, WMV, MKV и WEBM размером до 300 МБ и длиной до 30 минут, в том числе видео прямо с iPhone в MOV. Сервис сам перекодирует ролик в формат, который быстро грузится в браузере, поэтому сжимать его заранее не нужно.

Фоновое видео для шапки сайта, наоборот, нужно сжать самим: несколько мегабайт, без звуковой дорожки. Иначе первый экран будет загружаться долго, особенно на мобильном интернете.

Как поставить ролик на сайт

Если выбрали видео в углу экрана:

1. Зарегистрируйтесь в Видвиджете по e-mail и создайте видеовиджет.
2. Загрузите ролик с телефона или компьютера.
3. Добавьте кнопку под видео: текст до 64 символов и ссылку на форму, запись или мессенджер. Выберите угол экрана и включите показ на телефонах.
4. Скопируйте код виджета и вставьте его на сайт: Tilda, WordPress, любой сайт.

Первые 14 дней работают все функции, потом один видеовиджет остаётся бесплатным. Тарифы: цены.

Чек-лист перед публикацией

• Ролик длится 15–45 секунд и начинается с действия, понятного без звука.
• Лицо хорошо освещено, свет спереди, фон не тёмный.
• Голос слышно чётко, без эха и гула.
• Главное в центре кадра, текста у краёв нет.
• Призыв в конце ролика совпадает с текстом кнопки.
• Если в кадре клиент или сотрудник, у вас есть их согласие на публикацию.
• Вы посмотрели ролик на телефоне без звука и со звуком, как посетитель.

Снимите первый вариант сегодня, не дожидаясь идеальных условий. Ролик всегда можно переснять: в видеовиджете новая загрузка заменяет прежнее видео, а код на сайте менять не нужно.