Видео на сайте почти всегда добавляют в последний момент: съёмку прислал клиент, ролик надо куда-то поставить. Дальше два исхода. Либо страница остаётся быстрой, либо мобильный посетитель ждёт восемь секунд и уходит, так и не увидев ни видео, ни кнопки заявки.
Мы в студии Сайты2.рф встраивали видео в производственные каталоги, в лендинги медцентров и в сайты отелей. Разберём варианты хранения, честную цену фонового ролика в шапке, автовоспроизведение, субтитры и разметку для поиска.
Три задачи, которые решает видео
Смешивать их не стоит, потому что техника у них разная.
Первая: показать процесс или объект. Экскурсия по цеху, съёмка объекта после ремонта, номер в отеле. Такое видео смотрят осознанно, ему место в отдельном блоке с превью и кнопкой запуска.
Вторая: создать атмосферу. Тот самый фоновый ролик за заголовком на первом экране. Смотреть его никто не собирается, он работает как подвижная картинка.
Третья: объяснить продукт. Короткий разбор на 60-90 секунд с озвучкой. Работает в сложных услугах, где текстом объяснять долго.
Первый и третий тип обычно окупаются. Второй чаще вредит, чем помогает, и вот почему.
Фоновое видео в шапке: сколько оно стоит на самом деле
Ролик на первом экране весит от 3 до 15 МБ даже после сжатия. Он начинает грузиться сразу и конкурирует за канал с CSS, шрифтами и главной картинкой. На мобильном интернете это означает пустой или дёрганый первый экран.
Есть и вторая цена, о которой не думают: трафик. Сайт отеля с фоновым видео на 8 МБ и 20 тысячами визитов в месяц раздаёт около 160 ГБ только на эту анимацию. На виртуальном хостинге это повод для письма от провайдера.
Если фоновое видео всё-таки нужно, минимальный набор правил такой:
- Разрешение не выше 1280 пикселей по ширине, битрейт умеренный, длительность до 10 секунд с бесшовным циклом.
- Формат: основной WebM, запасной MP4 (H.264).
- Атрибуты
muted,loop,playsinline,preload="none". - Постер-картинка, которая показывается до старта видео и остаётся единственным содержимым для мобильных.
- На экранах уже 768 пикселей видео не подключается вообще, вместо него статичная картинка.
- Уважайте настройку
prefers-reduced-motion: если человек отключил анимации в системе, видео не запускаем.
Последний пункт касается не только вкуса. Для части посетителей движущийся фон физически неприятен, а требование учитывать эту настройку прямо описано в рекомендациях по доступности.
Свой плеер или видеохостинг
| Способ | Плюсы | Минусы | Когда выбирать |
|---|---|---|---|
Файл на своём сервере, тег video |
нет чужих логотипов и рекомендаций, полный контроль | одно качество для всех, нагрузка на хостинг и канал | короткие ролики до 10-15 МБ, фоновое видео |
| VK Видео | быстрая отдача в РФ, адаптивное качество, аналитика | брендирование плеера, рекомендации в конце | основной вариант для российской аудитории |
| Rutube | отдача в РФ, встраивание без ограничений | меньше инструментов аналитики | альтернатива или дубль к VK |
| YouTube | лучшее качество плеера, субтитры, глобальная аудитория | тяжёлый iframe, доступность из РФ нестабильна | англоязычные проекты, обучающий контент |
| Платный видеосервис (Kinescope, Boomstream) | без рекламы, защита от скачивания, статистика | абонплата | курсы, закрытый контент, вебинары |
Для клиентских сайтов мы чаще делаем так: основное видео на VK, дубль на своём сервере для короткого превью, фоновая анимация только файлом.
Как встроить YouTube или VK без потери скорости
Стандартный код встраивания подключает плеер сразу. Вместо этого ставим картинку-превью и подменяем её настоящим плеером после клика. Разметка простая:
<div class="video" data-video="ID_РОЛИКА">
<picture>
<source type="image/webp" srcset="/img/video/preview.webp">
<img src="/img/video/preview.jpg" width="1280" height="720"
alt="Экскурсия по производству" loading="lazy">
</picture>
<button class="video__play" type="button" aria-label="Смотреть видео"></button>
</div>Скрипт по клику заменяет содержимое блока на iframe с параметром автозапуска. Выигрыш заметный: страница перестаёт грузить сотни килобайт чужих скриптов, а показатели LCP и INP приходят в норму. Что это за метрики и на что они влияют, разбирали в статье про Core Web Vitals.
Два нюанса, которые легко упустить. Превью нужно с явными width и height, иначе при подстановке плеера страница дёрнется и испортит CLS. И кнопка должна быть настоящей кнопкой с aria-label, а не картинкой: иначе с клавиатуры видео не запустить.
Сжатие: как получить приемлемый вес
Заказчики обычно присылают файл с телефона или из монтажа: 200-400 МБ. Такой файл нельзя ставить ни на сайт, ни даже на хостинг.
Рабочий рецепт для веб-версии через ffmpeg:
ffmpeg -i source.mov -vf "scale=1280:-2" -c:v libx264 -crf 26 -preset slow
-profile:v high -pix_fmt yuv420p -movflags +faststart -an out.mp4
ffmpeg -i source.mov -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 34 -b:v 0 -an out.webmКлючевое здесь: crf управляет качеством (чем больше число, тем меньше вес), -movflags +faststart переносит метаданные в начало файла, чтобы воспроизведение начиналось до полной загрузки, а -an выбрасывает звуковую дорожку у фонового видео. Ролик на 30 секунд после такой обработки обычно весит 2-4 МБ вместо исходных 150.
Автовоспроизведение и звук
Правила браузеров простые: со звуком автозапуск запрещён, без звука разрешён при наличии muted и playsinline. На iOS без playsinline видео развернётся на весь экран, и посетитель окажется в чужом интерфейсе вместо вашей страницы.
Если у видео есть озвучка, добавляйте кнопку включения звука и не прячьте её. Мы обычно ставим её поверх видео в правом нижнем углу с подписью, а не одной иконкой: иконка динамика без текста воспринимается хуже, чем кажется.
Субтитры и расшифровка
Субтитры делаются файлом WebVTT и подключаются к своему плееру одной строкой:
<video controls preload="none" poster="/img/video/preview.jpg">
<source src="/video/tour.webm" type="video/webm">
<source src="/video/tour.mp4" type="video/mp4">
<track kind="subtitles" src="/video/tour.ru.vtt" srclang="ru" label="Русский" default>
</video>Расшифровку текстом полезно публиковать рядом, под спойлером. Это одновременно доступность для тех, кто не может смотреть видео, и текст, который читает поисковик. На сайте медцентра расшифровки видеоответов врача принесли трафик по длинным запросам, которых в основном тексте страницы не было.
Разметка для поиска
Чтобы видео попадало в специальные блоки выдачи, страницу помечают разметкой VideoObject: название, описание, картинка-превью, дата загрузки, продолжительность в формате ISO 8601, ссылка на файл или страницу воспроизведения. Синтаксис и другие типы разбирали в материале про микроразметку Schema.org.
Дополнительно стоит добавить видео в отдельную карту сайта или указать в основной. Тогда поисковик узнает о ролике сразу, а не при следующем полном обходе. Как устроены карты сайта, писали в статье про sitemap.xml и robots.txt.
Сколько стоит встроить видео
| Работа | Срок | Стоимость |
|---|---|---|
| Блок с одним видео, превью, ленивое подключение плеера | 3-4 часа | 6 000 - 10 000 рублей |
| Сжатие и подготовка ролика в двух форматах с постером | 1-2 часа на ролик | 3 000 - 5 000 рублей |
| Фоновое видео в шапке с отключением на мобильных | 4-6 часов | 8 000 - 14 000 рублей |
| Галерея видео с фильтрами и разметкой VideoObject | 2-3 дня | 25 000 - 45 000 рублей |
| Субтитры: расшифровка и файл VTT | зависит от длины | от 2 500 рублей за 10 минут |
Съёмку и монтаж мы не делаем, но помогаем с техническими требованиями к материалу: длительность, соотношение сторон, где оставить место под текст, чтобы наложенный заголовок не перекрывал важное.
Короткий чек-лист
- Ролик сжат до 2-5 МБ для веба, есть WebM и MP4.
- Есть постер-картинка с указанными размерами.
- Плеер подключается после клика, а не при загрузке страницы.
- Фоновое видео без звука, отключено на мобильных и при
prefers-reduced-motion. - Есть субтитры и расшифровка для важных роликов.
- Добавлена разметка
VideoObject. - После внедрения проверены LCP и CLS: не просели ли показатели.
Проверить последний пункт можно бесплатно в PageSpeed Insights, а если цифры не нравятся, напишите нам через форму на странице контактов: посмотрим, что именно тормозит, и предложим план правок. Полезно заодно свериться со списком техник ускорения.
