Boomstream - профессиональная видеоплатформа для бизнеса: размещайте видео на сайте, проводите прямые трансляции, защищайте контент DRM и водяными знаками, продавайте доступ и интегрируйте к себе через API. Инфраструктура в России, тестовый период 30 дней.

Фоновое видео на сайт

функционал

Использование видео Boomstream в качестве фонового видео на сайте

Коротко о главном:
Для использования видео Boomstream в качестве фонового на сайте получите прямую MP4-ссылку: откройте карточку видео → вкладка «Публикация плеера» → вкладка «MP4» → скопируйте ссылку нужного качества. Вставьте её в HTML-тег <video> с атрибутами autoplay muted loop playsinline. Для корректной работы на iOS добавьте в конец ссылки параметр #t=0.001.

Если сайт сделан на Tilda, фон можно поставить без кода — через поле MP4 в обложке. Пошагово: как поставить фоновое видео в обложку Tilda.

Зачем использовать фоновое видео

Фоновое видео — стандартный элемент современных сайтов. Оно решает несколько задач:

  • Привлекает внимание к ключевому предложению на первом экране;
  • Создаёт атмосферу и передаёт настроение бренда;
  • Демонстрирует продукт или услугу в действии;
  • Увеличивает время пребывания visitors на странице.

Главное требование к фоновому видео — отсутствие элементов управления плеером. Зритель не должен видеть кнопки Play, Pause, перемотки и громкости. Видео должно воспроизводиться автоматически, бесшумно и циклически.

Особенности фонового видео в браузерах

Современные браузеры (Chrome, Safari, Firefox, Edge) имеют строгие правила автовоспроизведения видео:

  • Автостарт возможен только без звука — браузеры блокируют видео со звуком, чтобы не мешать пользователю;
  • Видео должно быть зациклено — для непрерывного воспроизведения;
  • На iOS видео воспроизводится inline — без перехода в полноэкранный системный плеер (атрибут playsinline).

Эти требования нужно учитывать при встраивании фонового видео через HTML-тег <video>.

Пошаговая инструкция

Шаг 1. Дождитесь создания транскодов

После загрузки видео на платформу дождитесь завершения обработки — создания транскодов, отдельных MP4-файлов для каждого разрешения). В списке видеофайлов транскоды должны стать зелёного цвета.

Обратите внимание: если оригинал был в качестве 720p, то максимальный транскод также будет 720p. Для фонового видео обычно достаточно качества 720p или 1080p.

Нажмите на название вашего видео, чтобы открыть карточку.

Выбор видео в списке видеофайлов Boomstream

Шаг 2. Перейдите во вкладку «Публикация плеера»

В открывшейся карточке видео переключитесь на вкладку «Публикация плеера».

Вкладка «Публикация плеера» в карточке видео

Шаг 3. Выберите вкладку MP4

В разделе публикации переключитесь на вкладку «MP4». Здесь отображаются все доступные транскоды с характеристиками:

  • Разрешение видео (1080p, 720p, 480p и т.д.);
  • Битрейт видео (Кбит/с);
  • Битрейт аудио (Кбит/с).

Вкладка MP4 со списком транскодов и их характеристиками

Выберите нужное качество. Для фонового видео рекомендуем 720p — баланс качества и скорости загрузки, скопируйте ссылку.

Шаг 4. Вставьте ссылку на сайт

Используйте скопированную MP4-ссылку в HTML-теге <video> на вашем сайте.

В Tilda ссылку можно вставить в видеоблоки — см. интеграцию с Tilda

Пример встраивания фонового видео

Базовый HTML-код для фонового видео:

HTML 
<video autoplay muted loop playsinline>
  <source src="https://cdnv.boomstream.com/balancer/XXXXXXXXXX.mp4" type="video/mp4">
  Ваш браузер не поддерживает воспроизведение видео.
</video>

Обязательные атрибуты:

Атрибут Назначение
autoplay Автоматический запуск видео при загрузке страницы
muted Отключение звука (обязательно для автостарта)
loop Циклическое воспроизведение
playsinline Воспроизведение внутри контейнера на iOS (без перехода в полноэкранный режим)

Пример с CSS для покрытия всего экрана:

HTML 
<video autoplay muted loop playsinline 
       style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
              object-fit: cover; z-index: -1;">
  <source src="https://cdnv.boomstream.com/balancer/XXXXXXXXXX.mp4" type="video/mp4">
</video>

Этот код размещает видео как фон страницы, покрывающий весь экран с сохранением пропорций.

Важно для iOS устройств

На устройствах с iOS (iPhone, iPad) при загрузке видео через тег <video> может появляться серый фон или чёрный экран в начале воспроизведения. Это связано с особенностями работы Safari.

Для корректного воспроизведения на всех устройствах добавьте в конец MP4-ссылки параметр #t=0.001:

Неправильная ссылка:

Text 
https://cdnv.boomstream.com/balancer/LtfcPRjp-z9Z1DD2U.mp4

Правильная ссылка:

Text 
https://cdnv.boomstream.com/balancer/LtfcPRjp-z9Z1DD2U.mp4#t=0.001

Этот параметр указывает браузеру начать воспроизведение с 0.001 секунды, что решает проблему с серым фоном на iOS.

Расчёт трафика

Частый вопрос: как рассчитать трафик, который будут потреблять посетители сайта при просмотре фонового видео?

Формула расчёта:

Text 
Трафик = Среднее время на странице × Количество посетителей

Пример расчёта:

  • Среднее время на странице: 30 секунд;
  • Посетителей в день: 1000;

Расчёт: 30 × 1000 = 30000 cек = 8.3 часа.

Важно понимать: если вкладка сайта активна у посетителя, трафик отправляется с серверов Boomstream. При сворачивании вкладки или уходе со страницы передача прекращается.

Как снизить потребление трафика:

  • Ограничьте длину видео (оптимально 15–30 секунд для фона);
  • Добавьте poster-изображение, которое показывается до загрузки видео.

Рекомендации для фонового видео

Оптимальные параметры:

  • Длина: 10–30 секунд (короткое зацикленное видео);
  • Разрешение: 1280x720 или 1920x1080;
  • Битрейт: 1500–3000 Кбит/с для 720p, 3000–5000 Кбит/с для 1080p;
  • FPS: 24–30;
  • Вес файла: до 10–20 МБ.

Контент:

  • Плавные движения без резких переходов;
  • Отсутствие мелких деталей и текста (они теряются на фоне);
  • Нейтральная цветовая палитра, не отвлекающая от основного контента;
  • Отсутствие резких звуков (даже если видео mute, это хорошая практика).

Краткое руководство

Шаг Действие
1 Загрузите видео и дождитесь зелёных транскодов
2 Откройте карточку видео → вкладка «Публикация плеера»
3 Выберите вкладку MP4 и нужное качество
4 Скопируйте ссылку
5 Добавьте #t=0.001 в конец ссылки для совместимости с iOS
6 Вставьте в тег <video> с атрибутами autoplay muted loop playsinline

Частые вопросы (FAQ)

Почему фоновое видео не запускается автоматически?
Современные браузеры блокируют автостарт видео со звуком. Убедитесь, что в теге <video> указан атрибут muted. Без него браузер проигнорирует autoplay, и видео не запустится.

Какое качество выбрать для фонового видео?
Для большинства сайтов достаточно 720p (1280x720) — это баланс между качеством и скоростью загрузки. Для retina-дисплеев можно использовать 1080p, но учитывайте увеличение трафика в 2–3 раза.

Можно ли использовать адаптивный стриминг (HLS) для фонового видео?
Технически возможно, но не рекомендуется. HLS требует JavaScript-плеера (например, video.js с HLS.js), что увеличивает вес страницы. Для простого фонового видео прямая MP4-ссылка работает быстрее и надёжнее.

Влияет ли фоновое видео на SEO и Core Web Vitals?
Да, большое видео может ухудшить метрики LCP (Largest Contentful Paint) и CLS (Cumulative Layout Shift). Рекомендации: 1) Используйте loading="lazy" для видео не на первом экране; 2) Задайте фиксированные размеры контейнера; 3) Оптимизируйте вес видео.

Можно ли сделать фоновое видео только для десктопа?
Да, через CSS media queries скройте видео на мобильных устройствах. Это снизит потребление трафика и улучшит производительность на смартфонах:

Text 
@media (max-width: 768px) {
  video { display: none; }
}

Поддерживается ли защита от скачивания для MP4-ссылок?
Нет, прямая MP4-ссылка не имеет встроенной защиты — файл можно скачать через инструменты разработчика браузера. Для фонового видео это обычно не критично, так как контент не является эксклюзивным.

Что произойдёт, если посетитель оставит вкладку открытой на длительное время?
Видео будет воспроизводиться циклически, потребляя трафик. Для оптимизации можно добавить JavaScript-паузу при потере фокуса вкладки (visibilitychange event) и возобновление при возврате.

Можно ли использовать несколько фоновых видео на одной странице?
Технически возможно, но не рекомендуется. Каждое видео потребляет трафик и ресурсы браузера. Лучше использовать одно видео на ключевом экране или чередовать видео через JavaScript.

Как проверить, что видео корректно работает на всех устройствах?
Протестируйте страницу в Chrome DevTools (режим device toolbar), на реальных iOS-устройствах и в Safari. Убедитесь, что: 1) Видео стартует автоматически; 2) Нет серого фона на iOS; 3) Видео зацикливается; 4) Нет горизонтальной прокрутки на мобильных.

Нужно ли добавлять субтитры к фоновому видео?
Нет, фоновое видео воспроизводится без звука, поэтому субтитры не нужны. Если видео содержит важную текстовую информацию, продублируйте её в HTML-контенте страницы.

Text