Видео для сайта: какие ролики нужны
Запрос «видео на сайт» обычно означает одно: страница есть, конверсии нет. Посетитель приходит, читает два абзаца и уходит. Видео в такой ситуации работает как замена тексту в самом дорогом месте — на первом экране и рядом с кнопкой.
Но у сайта нет одного универсального ролика. Фоновый цикл, объясняющий ролик, демонстрация продукта и отзывы решают разные задачи и живут в разных местах страницы. Если поставить один файл на всё, он не сделает ни одну из работ.
Четыре типа роликов и их места
Фоновый цикл на первом экране. Пять-десять секунд, без звука, без сюжета: атмосфера, процесс, продукт в движении. Его задача — задать тон, а не рассказать историю.
Объясняющий ролик. Шестьдесят-девяносто секунд о том, как устроен продукт и кому он нужен. Ставится после заголовка, до формы заявки. Здесь уместна инфографика и моушн-дизайн: движение объясняет связи между блоками лучше статичной схемы.
Демонстрация продукта. Пятнадцать-тридцать секунд крупных планов: как открывается, как работает, что внутри. Хорошо работает в карточке товара и на странице тарифа.
Отзывы. Тридцать-шестьдесят секунд живой речи. Самый дешёвый по производству формат и самый сложный по съёмке: люди говорят неровно, а вырезать нужно связно.
Фоновое видео: где работает и где мешает
Фон на первом экране усиливает впечатление, когда за ним стоит конкретика: производство, текстура материала, город, движение. Он мешает, когда под ним текст: пёстрый кадр убивает читаемость, и никакой затемняющий слой не спасает на мобильном.
Практика простая: фон занимает первый экран, текст стоит на спокойной части кадра или на отдельной плашке. Зацикленный фрагмент должен быть коротким, без резкого монтажа на стыке петли — иначе глаз цепляется за склейку каждый раз.
Если сайт открывают с телефона в дороге, фоновое видео часто отключают совсем: экономия трафика важнее атмосферы. Тогда вместо файла отдаётся статичный кадр, а видео подгружается только на широком экране.
Сколько весит видео для сайта
Вес — главный ограничитель. Файл на 40–50 МБ на первом экране означает, что часть посетителей уйдёт до того, как увидит картинку.
Ориентир считается просто: битрейт умножается на длительность. Восемь секунд 1080p при 4 Мбит/с — это около 4 МБ, минута при том же битрейте — около 30 МБ. Для фона достаточно пяти-восьми секунд и 720p или 1080p с умеренным битрейтом; для объясняющего ролика вес не так критичен, потому что он грузится по клику.
Второй резерв экономии — кодек. Современные кодеки дают тот же визуальный результат при меньшем битрейте, но требуют проверки на старых устройствах.
Форматы и вставка: MP4, WebM, poster
Браузеры поддерживают разные контейнеры и кодеки, поэтому в разметку кладут несколько источников: браузер берёт первый, который понимает. Это прямо описано в документации на элемент video (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video).
Рабочая схема: MP4 с H.264 как основной файл для совместимости, WebM как более лёгкий вариант для тех, кто его поддерживает. Атрибут poster задаёт картинку до старта — она видна, пока видео не загрузилось, и она же становится кандидатом в главный элемент страницы.
Атрибут preload управляет тем, сколько браузер тянет заранее. Для фона разумно preload="none" плюс poster: сначала картинка, файл — когда дойдёт очередь. Для ролика, который запускают кнопкой, тот же приём экономит трафик и не мешает.
Скорость загрузки: что реально влияет
Метрика Largest Contentful Paint измеряет, когда отрисовался самый крупный элемент в видимой области — им может быть и видео. Об этом прямо сказано в документации web.dev (https://web.dev/articles/lcp). Тяжёлый файл в первом экране отодвигает этот момент и портит оценку страницы.
Что помогает: постер вместо автозагрузки, короткий цикл, отдельный облегчённый файл для мобильных, отложенная загрузка всего, что ниже первого экрана. Что не помогает: сжатие «на глаз» до артефактов, десять форматов сразу и видео на каждой странице каталога.
Проверять стоит на реальном телефоне в мобильной сети, а не на рабочем ноутбуке в офисе. Разница между этими условиями обычно и есть причина, по которой видео «вроде работает», а конверсия падает.
Звук, субтитры и автоплей
Браузеры блокируют автозапуск со звуком. Правило, которое приводит MDN в руководстве по автоплею (https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay): воспроизведение разрешено, если звук выключен или его нет, либо пользователь уже взаимодействовал со страницей. Отсюда рабочая схема фона: muted, loop, playsinline.
Субтитры нужны даже там, где звук есть. Значительная часть просмотров идёт без звука, и ролик без титров теряет смысл. Дорожка подключается элементом track, текст дублирует речь, а не пересказывает её.
Кнопка включения звука должна быть видимой и не перекрывать интерфейс. Автоплей со звуком после клика — допустимый приём, но только по действию пользователя.
Сколько стоит и что заказывать
Ролик до 90 секунд — от 16 000 ₽, срок около недели: сценарий, раскадровка, генерации или съёмка, монтаж, звук, титры. Фоновый цикл дешевле, потому что в нём нет сюжета и озвучки.
Изготовление видео с помощью нейросетей ускоряет производство фонов и демонстраций: продукт можно показать в десятке сценариев без съёмочного дня. Ручные ролики нужны там, где важна живая речь и доверие: отзывы, истории сотрудников, интервью.
Если параллельно нужен ролик о компании для инвесторов или соискателей, это отдельная задача со своей структурой — про неё есть разбор видео о компании.
