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

Заставка первого экрана

Фоновое видео задает настроение и показывает, чем вы занимаетесь: производство, команду, продукт в деле. Правила у него строгие:

• Без звука. Браузеры, например Chrome, всегда разрешают автозапуск без звука, а со звуком — только в отдельных случаях. Поэтому фоновый ролик делаем беззвучным, и смысл у него держится на картинке.
• Короткий цикл без швов. Конец переходит в начало незаметно.
• Без важного текста внутри видео. Заголовок и кнопку ставят в верстке поверх ролика, так их видят поисковики и экранные читалки.
• Легкий файл и картинка-постер. Пока видео грузится, посетитель видит постер, а не черный прямоугольник. На телефоне иногда лучше оставить один постер.
• Кнопка паузы. По рекомендациям доступности WCAG, если движение запускается само, длится больше пяти секунд и идет рядом с другим содержимым, пользователь должен иметь возможность его остановить.

Ролик о продукте

Ставим рядом с блоком «как это работает» или в карточку услуги. Его включают сами, поэтому он может быть со звуком и длиннее заставки, обычно 60⁠–⁠120 секунд. Показываем настоящий интерфейс или товар, одну мысль на кадр и титры для тех, кто смотрит без звука. Такие ролики мы подробно описали на странице объясняющих роликов.

Видеоотзывы клиентов

Отзыв на видео убеждает, когда в нем живой человек и конкретная история: какая была задача, что сделали, что изменилось. Текст клиенту не пишем, готовим вопросы и снимаем разговор, а в монтаж берем лучшие ответы. Каждый отзыв — 30⁠–⁠60 секунд и одна история. Клиент появляется в ролике только с письменного согласия, это условие любой съемки людей. Если клиент не готов к камере, делаем отзыв голосом с фото или анимацией.

Как встроить видео на сайт

Короткий фоновый цикл кладем файлом на сайт: отдаем MP4 и WebM, постер и версию для телефона. Длинный ролик удобнее загрузить на VK Видео, Rutube или YouTube и встроить плеер так, чтобы сначала показывалась только обложка, а сам плеер загружался по клику. Так страница открывается быстрее, и так же встроены ролики на этом сайте, например в кейсе SkuScan.

Для роликов со звуком отдаем субтитры отдельным файлом. Их можно подключить к плееру, и тогда видео понятно без звука.

Как работаем и от чего зависит смета

1. Смотрим сайт и решаем, где видео действительно нужно, а где хватит фото.
2. Пишем сценарии: заставка, ролик о продукте, вопросы для отзывов.
3. Снимаем или рисуем, монтируем, делаем цвет и звук.
4. Готовим файлы под верстку и проверяем, как они грузятся на телефоне.

Смета зависит от того, снимаем мы или анимируем, сколько роликов и съемочных дней нужно, сколько клиентов записываем на отзывы и в каких городах. Подробности о формате — на странице ролика о компании.