Короткий ответ
Фоновое видео на первом экране всегда немое, всегда тяжёлое и не даёт понять, хотел ли его кто-нибудь. Разбираем, где движение действительно нужно, где достаточно постера с кнопкой, и почему цвет надо закладывать в экспорт, а не в CSS.
Короткий ответ: видео продаёт движение, а не сведения
У первого экрана одна задача — объяснить, чем вы занимаетесь и куда нажать дальше. Видео хорошо показывает движение, фактуру, масштаб и людей. Оно плохо держит цену, характеристики и адрес: такие вещи посетитель пробегает глазами, а ролик глазами не пробежишь.
Поэтому вопрос звучит не «видео или без видео». Он звучит так: нужно ли этому объекту двигаться, чтобы его поняли? Ткань падает, станок режет, зал оказывается больше, чем на снимке, человеку верят, потому что его слышно. Движение вытягивает именно это.
Когда ответ отрицательный, фотография с подписью делает ту же работу за долю трафика, появляется уже на первой отрисовке и читается в метро на слабом сигнале. Это не компромисс и не экономия на качестве, а просто верно выбранный формат.
Дальше в статье — два решения, которые из этого следуют: запускается ли ролик сам, и во что это обходится на телефоне, внутри браузера и в вашем собственном производственном бюджете.
Фоновый автоплей против постера с кнопкой воспроизведения
Фоновый цикл стартует, ничего не спрашивая. Он тратит трафик, заряд и внимание посетителя до того, как тот решил, что страница вообще заслуживает хотя бы одного из трёх. Постер с кнопкой стоит одной картинки и одного осознанного нажатия.
У варианта с постером есть побочная польза: он измеряет интерес. Если кнопку почти никто не нажимает, значит ролик был украшением, и вы узнали это дёшево. Автоплей такого сигнала не даст никогда: в статистике «посмотрели» все.
Узкий случай для цикла всё-таки есть: короткая тихая подложка под заголовком, где содержанием действительно является атмосфера, — зал ресторана, движение ткани, цех. Она обязана быть без звука, короткой и не нести в себе никакой информации.
Всё, где есть титры, говорящее лицо, цифра на экране или важная последовательность кадров, живёт за кнопкой. Посетителю нужно уметь это запустить, остановить и отмотать назад, а фоновый цикл ни одной из трёх возможностей не даёт.
Что автоплей на самом деле требует от браузера
Браузеры не дают странице включить звук по своей инициативе. Автоматически запускается только видео без звука, а самому элементу нужны атрибуты muted, autoplay, loop и playsinline: без playsinline телефон способен развернуть ролик на весь экран вместо воспроизведения на месте.
Это стоит прочитать дважды: автоматически стартующий ролик всегда немой. Если сообщение живёт в закадровом голосе, автоплей его уже отрезал, и вы платите полным весом страницы за доставку пустоты.
Немое воспроизведение перекладывает всю нагрузку на титры и надписи в кадре, а им дальше предстоит остаться читаемыми поверх движущегося фона. Этой задачей мы займёмся отдельно, потому что решается она не в монтаже, а в вёрстке.
И автоплей — это просьба, а не гарантия. Низкий заряд, режим экономии трафика, системная настройка «меньше движения» или политика браузера могут её отклонить. Страница обязана выглядеть законченной в ситуации, когда ролик не стартовал вообще.
Вес страницы: не спорьте, а измерьте
Не решайте это по памяти и не по ощущению дизайнера. Откройте панель сети, включите ограничение скорости и мобильный профиль, загрузите страницу и снимите два числа: переданный объём ролика и переданный объём постера.
Видеофайл и одна неподвижная картинка — сущности разного порядка, и разрыв виден сразу. Смысл измерения в том, что после него вы обсуждаете обмен с числом в руках, а не с чужим вкусом.
Основную часть ущерба снимают два значения атрибута preload. Значение none удерживает браузер от загрузки ролика, пока его не попросят; значение metadata подтягивает ровно столько, чтобы узнать длительность. Автоплей не может воспользоваться ни тем, ни другим — в этом и состоит его цена.
Отдельно проверьте медленное соединение: держится ли вёрстка, появляется ли постер, или посетитель получает серый прямоугольник там, где должен быть первый экран. Проверьте это состояние специально — посетители находят его без всяких усилий.
Контейнер и кодек: расширение файла — это не спецификация
Руководство MDN по медиаконтейнерам вводит различение, которое экономит переписку с подрядчиком: контейнер — это оболочка (MP4, WebM, Ogg, QuickTime), а кодек — способ сжатия картинки и звука внутри неё (H.264, VP9, AV1, AAC, Opus).
Два файла могут одинаково заканчиваться на .mp4 и вести себя по-разному, потому что один и тот же контейнер способен нести кодек, который конкретный браузер не декодирует. Значит, «пришлите MP4» — неполное задание: кодек нужно называть в брифе.
На практике это означает договориться про H.264 в MP4 ради широкой совместимости и при желании добавить вторую, более экономную по весу версию. Элемент video принимает несколько источников, и браузер берёт первый, который умеет проигрывать.
Если указать строку кодека в атрибуте type, браузер отбросит неподходящий файл, не скачивая его. Мелочь, которая имеет значение ровно в одном случае — на посетителе с худшим соединением, то есть на том, кого вы менее всего хотите потерять.
Постер делает больше работы, чем само видео
Постер — обычная картинка, поэтому браузер рисует его раньше, чем придёт хоть один байт видео. На медленном телефоне посетитель видит именно постер, и довольно часто постером всё увиденное и ограничивается.
Выбирайте кадр осознанно. Он должен читаться с одного взгляда: понятный объект, свободное место под кнопку воспроизведения и под заголовок, а не случайный серединный кадр с человеком, пойманным на моргании.
Обрабатывайте постер как любую другую главную картинку: нужный размер, сжатие и такое же соотношение сторон, как у ролика, чтобы вёрстка не прыгала в момент старта воспроизведения.
И напишите окружающий текст так, чтобы он стоял сам по себе. Заголовок и одна фраза рядом с постером отвечают на вопрос посетителя вообще без воспроизведения, а видео становится доказательством для тех, кому доказательство нужно.
Почему фильтр поверх играющего видео стоит цветового прохода на каждый кадр
Дизайнеру хочется затонировать главный ролик: обесцветить, увести в тепло, размыть, положить сверху тёмную заливку, чтобы заголовок читался. Сделанное в CSS поверх воспроизведения, это перестаёт быть разовым эффектом.
Неподвижную картинку можно отфильтровать один раз и переиспользовать результат, пока ничего не меняется. Видео отдаёт композитору новые пиксели много раз в секунду, поэтому фильтр пересчитывается для каждого такого кадра, на устройстве посетителя и всё время, пока идёт ролик.
Размытие обходится дороже тонировки, потому что объём работы растёт вместе с радиусом, а фильтр поверх растянутого во всю ширину видео вдобавок уводит кадры с самого короткого пути вывода на экран, который есть у браузера.
Лечение скучное и бесплатное: заложите вид в экспорт. Монтажёр применяет цвет один раз, к файлу, и каждый посетитель скачивает уже готовый результат. Если тёмная подложка нужна ради читаемости, ровный полупрозрачный слой стоит несравнимо меньше фильтра.
Текст поверх движущейся картинки — это задача про контраст
Контраст считается между текстом и тем, что за ним. За видео это «что-то» меняется непрерывно, поэтому заголовок, который проходит по контрасту на постере, через три секунды проваливается, когда в кадр входит светлая стена.
Краткий справочник W3C по WCAG 2.2 задаёт требования к контрасту текста, и практический вывод для видеофона один: на сам материал полагаться нельзя. Под типографикой нужен постоянный слой, который не зависит от содержимого кадра.
Этим слоем может быть сплошная или градиентная подложка, цветной блок, внутри которого живёт заголовок, или просто вынос текста за пределы видео — тогда ролик становится панелью рядом. Все три варианта дешевле борьбы с материалом.
Проверяйте честно: остановитесь на десяти разных моментах ролика и посмотрите на заголовок в каждом. Если он исчез хотя бы один раз, значит для кого-то из посетителей он исчез совсем.
Дайте человеку возможность это остановить
WCAG 2.2 требует механизма, который позволяет поставить на паузу, остановить или скрыть движущееся содержимое, если оно стартует само, длится дольше пяти секунд и показывается параллельно с другим содержимым, а также способа остановить звук, включившийся без участия человека.
Зацикленный главный ролик — ровно такое содержимое. Видимая кнопка паузы и есть честный ответ, а стоит она одной кнопки. Она же выручает тех, кого не покрывает ни одно требование: людей в транспорте, на совещании и на тарифе с оплатой за мегабайты.
Уважайте и системную настройку уменьшенного движения. Если посетитель попросил операционную систему об этом, отдавайте постер и не запускайте цикл: страница продолжает работать, а вы убрали вариант, от которого части людей физически плохо.
Если в ролике есть речь, нужны субтитры, и WCAG рассматривает их как требование к записанным синхронизированным медиа, а не как приятное дополнение. Немой автоплей и вовсе не оставляет речи другого канала, кроме текста в кадре.
Когда обычная фотография просто выигрывает
Съёмка выигрывает там, где предмет неподвижен: товар на белом, меню, портрет команды, готовый интерьер, сертификат, ценник. Движение ничего не прибавляет объекту, в котором движения нет.
Она выигрывает и на страницах, задача которых — быть найденными и прочитанными: услуга, карточка каталога, страница филиала. Таким страницам нужнее текст, структура и быстрый первый экран, чем главный ролик.
И она выигрывает, когда вы не готовы поддерживать видео. Фотография годовой давности выглядит фотографией. Промо-ролик годовой давности выглядит заброшенным, потому что показывает прошлую упаковку и телефон, который вы с тех пор сменили.
Честная проверка простая: опишите словами, что будет в ролике. Если описание уложилось в одну фразу про неподвижный предмет, закажите фотографию, а разницу потратьте на текст рядом с ней.
Где видео действительно окупается
Сборка, установка, эксплуатация. Всё, что клиенту предстоит делать руками, показать проще, чем описать, а короткий ролик снимает разговор с поддержкой, который иначе повторяется каждую неделю.
Масштаб и пространство. Залы, площадки, транспорт и крупные объекты на фотографии становятся плоскими; медленное движение внутри них объясняет размер так, как не объяснит ни один широкоугольный кадр.
Люди и доверие. Человек, отвечающий на вопрос своими словами, делает то, чего не делает отзыв в кавычках, — при условии, что запись достаточно чистая, чтобы ей верили.
И движение самого продукта: ткань, жидкость, механизм, петля, сгиб. Если продаёте именно поведение вещи, статичная съёмка описывает не тот предмет, который вы продаёте.
Что заказывать и сколько это стоит
Одна вертикальная работа — это Single Reel за $70 со сроком 1-2 рабочих дня и 1 раундом правок. В него входят субтитры, лицензированный трек и экспорты под все вертикальные площадки; съёмка, сценарий и актёры в него не входят.
Если материал уже снят и нужен комплект, Reels Pack стоит $90, включает до 5 монтажей и делается за 1-2 рабочих дня с момента передачи материала, с 2 раундами правок по монтажу; съёмка в него не входит — материал предоставляете вы.
Когда дата зафиксирована, есть Reels Pack Express за $150: срок 1 рабочий день, оборот 24 часа от передачи материала, 1 раунд правок, а съёмка и лицензирование сверх предоставленного трека остаются за рамками пакета.
Для главного ролика с короткими производными подходит Campaign Edit за $180 со сроком 3-5 дней, 2 раундами правок по монтажу и 1 по цвету; лицензионная музыка не включена — лицензию покупаете вы. Если сайту нужен поток, а не один запуск, Monthly Content Engine стоит $290/mo, работает месячным циклом с уведомлением за 30 дней о прекращении, объём согласуется в начале каждого цикла, а съёмочные дни и платный сток идут отдельно.
Практический чеклист
- Решите, движется ли предмет на самом деле, прежде чем заказывать ролик.
- Замените автоматический ролик на постер с кнопкой везде, где видео несёт информацию.
- Измерьте переданный объём ролика и постера на мобильном профиле с ограничением скорости.
- Запросите у подрядчика конкретный кодек и контейнер, а не просто «MP4».
- Уберите тонировку, цвет и размытие из CSS и заложите их в экспорт.
- Добавьте видимую паузу, субтитры и запасной вариант для режима уменьшенного движения до запуска.
Вопросы и ответы
Нужно ли включать автовоспроизведение у главного ролика?
Только если он немой, короткий и не несёт информации, которую посетитель обязан прочитать. Как только в ролике появляются титры, говорящее лицо или важная последовательность, он переезжает за кнопку. И помните, что автоплей может быть отклонён браузером, режимом экономии трафика или системной настройкой уменьшенного движения, поэтому страница обязана выглядеть законченной без него.
Сколько стоит видео для сайта и за какой срок его сделают?
Single Reel стоит $70, срок 1-2 рабочих дня, 1 раунд правок; съёмка, сценарий и актёры не входят. Reels Pack — $90 за до 5 монтажей, 1-2 рабочих дня с момента передачи материала, 2 раунда правок по монтажу, материал предоставляете вы. Campaign Edit — $180, срок 3-5 дней, 2 раунда по монтажу и 1 по цвету, лицензию на музыку покупаете вы. Reels Pack Express — $150, 1 рабочий день, оборот 24 часа от передачи материала, 1 раунд. Monthly Content Engine — $290/mo, месячный цикл, уведомление за 30 дней о прекращении.
Какой формат просить у подрядчика?
Называйте и контейнер, и кодек. По руководству MDN контейнер (MP4, WebM, Ogg, QuickTime) — это оболочка, а кодек (H.264, VP9, AV1, AAC, Opus) — способ сжатия внутри неё, поэтому два файла с одинаковым расширением могут вести себя по-разному. Практичный запрос: H.264 в MP4 ради широкой совместимости, при необходимости — вторая, более экономная по весу версия вторым источником.
Можно просто повесить фильтр на видео в CSS?
Можно, но платить за это будет устройство посетителя. Неподвижную картинку фильтруют один раз, а видео отдаёт новые пиксели много раз в секунду, поэтому фильтр пересчитывается для каждого кадра, пока идёт ролик. Размытие дороже тонировки, потому что работа растёт с радиусом. Закладывайте цвет в экспорт, а для читаемости заголовка используйте ровный полупрозрачный слой.
Нужны ли субтитры, если ролик и так без звука?
Да, и по двум причинам сразу. Немое автовоспроизведение не оставляет речи другого канала, кроме текста в кадре, а WCAG 2.2 рассматривает субтитры как требование к записанным синхронизированным медиа. Отдельно нужен видимый способ поставить движение на паузу, если ролик стартует сам и длится дольше пяти секунд рядом с другим содержимым.