Фоновое видео для сайта: размер, формат, повтор и автозапуск на iPhone

Хорошее фоновое видео для сайта - короткий ролик без звука с незаметным переходом от конца к началу: 6-12 секунд, H.264 MP4 и при желании WebM, примерно 2-4 Мбит/с, без аудиодорожки, с заставкой и атрибутами autoplay muted loop playsinline. Такой ролик автоматически запускается на iPhone и занимает примерно до 5 МБ. Заставка появляется до загрузки первого кадра.

Основные параметры фонового видео

Это рабочие ориентиры, а не стандарт: для мелких деталей, например брызг или плёночного зерна, нужен более высокий битрейт, для тумана и градиентов - более низкий.

Размер фонового видео: расчёт

Умножьте битрейт на длительность, чтобы получить объём в мегабитах. Разделите его на 8, чтобы получить мегабайты.

Ролик на 10 секунд при 2 Мбит/с - это 20 мегабит, то есть около 2,5 МБ. Сократите его до 6 секунд при 3 Мбит/с и получите примерно 2,25 МБ.

Получили файл для первого экрана размером 45 МБ? Нужен более короткий ролик с разумным битрейтом, а не более мощный CDN. Для телефонов мы ориентируемся на 1,5-3 МБ при 720p.

Видео также заметно компактнее GIF: в примере самого web.dev GIF размером 3,7 МБ превратился в MP4 на 551 КБ и WebM на 341 КБ.

Сделайте повтор фонового видео незаметным

Последний кадр должен плавно переходить в первый. Выбирайте цикличное движение, например плывущий дым или медленное вращение товара, и проверяйте стык до экспорта. Способ создания и проверку стыка разбираем в статье о зацикленном видео с ИИ без видимого перехода.

Фоновое видео не запускается на iPhone? Проверьте пять пунктов

Согласно правилам WebKit для видео в iOS, автозапуск без нажатия разрешён, только если звук отключён или аудиодорожки нет. Для воспроизведения внутри страницы нужен playsinline. Обычно проблема в одном из следующих пунктов:

1. Нет muted или playsinline. Нужны оба атрибута. Без playsinline iPhone пытается открыть видео на весь экран.
2. Скрипт включает звук аудиодорожки. WebKit ставит видео на паузу, если звук появляется без действия пользователя. Удаляйте аудиодорожку при экспорте.
3. Элемент скрыт. Видео с display: none или visibility: hidden, а также видео за пределами видимой области не запускается автоматически или ставится на паузу.
4. Режим энергосбережения. В этом режиме iOS может полностью блокировать автозапуск. В трекере WebKit давно открыт отчёт «Режим энергосбережения отключает автоматическое воспроизведение видео». Обойти ограничение нельзя, поэтому заставка должна хорошо смотреться сама по себе.
5. Сервер не поддерживает запросы диапазонов байтов. Safari запрашивает видео частями. Большинство CDN это поддерживает, но некоторые адреса выдачи файлов в CMS - нет.

Наш исходный пример кода

<section class="hero">
  <video id="hero-video" autoplay muted loop playsinline
         preload="auto" poster="/media/hero-poster.webp"
         aria-hidden="true">
    <source src="/media/hero-loop.webm" type="video/webm">
    <source src="/media/hero-loop.mp4" type="video/mp4">
  </video>
  <button id="hero-toggle" type="button">Приостановить фоновое видео</button>
</section>

<script>
  const v = document.getElementById('hero-video');
  const btn = document.getElementById('hero-toggle');
  const reduce = matchMedia('(prefers-reduced-motion: reduce)');

  function setPaused(paused) {
    paused ? v.pause() : v.play().catch(() => {});
    btn.textContent = paused ? 'Воспроизвести фоновое видео' : 'Приостановить фоновое видео';
  }

  btn.addEventListener('click', () => setPaused(!v.paused));

  if (reduce.matches) {
    setPaused(true);                          // respect the OS setting
  } else {
    v.play().catch(() => setPaused(true));    // e.g. Low Power Mode: poster stays
  }
</script>

Браузер выбирает первый поддерживаемый <source>, поэтому WebM стоит первым (web.dev). Если на старых iPhone возникают проблемы, поставьте первым MP4.

Для MP4 команда вида ffmpeg -i master.mov -an -c:v libx264 -pix_fmt yuv420p -b:v 3M -maxrate 4M -bufsize 6M -movflags +faststart hero-loop.mp4 удаляет звук (-an), ограничивает битрейт и переносит индекс в начало файла. Благодаря этому воспроизведение начинается до завершения загрузки.

Скорость и доступность

LCP. При выборе кандидата на Largest Contentful Paint Google учитывает момент загрузки заставки или появления первого кадра видео, смотря что произошло раньше. Хороший LCP - 2,5 с или меньше (web.dev). Небольшая заранее загруженная заставка - самый простой способ улучшить LCP первого экрана с видео. Подробнее о движении и скорости - в статье о том, замедляет ли анимация сайт.

Кнопка паузы. По критерию 2.2.2 WCAG 2.2 уровня A для автоматически движущегося контента, который длится более пяти секунд и расположен рядом с другим содержимым, нужно предусмотреть возможность приостановки, остановки или скрытия. Бесконечный ролик на первом экране подпадает под это условие, поэтому кнопка в примере обязательна.

Уменьшение движения. Учитывайте prefers-reduced-motion: показывайте заставку вместо видео. Другие приёмы - в руководстве по доступной анимации сайта.

Размещение. Для ролика на 3 МБ обычный файл на CDN с длительным сроком кэширования лучше встраивания с видеоплатформы или обработки медиа конструктором страниц.