WebM или MP4 для сайта: как сделать видео быстрым и совместимым

Короткий ответ: используйте оба формата

Для большинства сайтов практичная схема такая:

• WebM с VP9 или AV1 и Opus — более лёгкий современный источник;
• MP4 с H.264 и AAC — максимально совместимый запасной вариант;
• poster — статичная обложка до начала воспроизведения.

MDN рекомендует WebM с современным открытым кодеком и MP4/H.264/AAC как широко поддерживаемый fallback. Браузер сам выберет первый понятный источник.

Минимальный правильный HTML

<video controls preload="metadata" poster="/video/cover.webp">
  <source src="/video/demo.webm" type="video/webm">
  <source src="/video/demo.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

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

Контейнер и кодек: что именно выбирать

MP4 и WebM — контейнеры. Браузер должен понимать и контейнер, и кодек. Справка MDN по выбору кодека отмечает: H.264 надёжнее всего связывать с MP4, а VP9 и AV1 — с WebM.

Для небольшого сайта VP9 + H.264 — спокойная рабочая пара. AV1 имеет смысл, когда видео смотрят много раз и дополнительное время кодирования окупается трафиком.

Что сильнее всего влияет на вес

Формат важен, но главные рычаги — длительность, разрешение, битрейт и частота кадров. Фоновому ролику на первом экране редко нужны 4K, 60 fps и звук.

• обрежьте пустые секунды;
• не отдавайте 2560 px в блок шириной 900 px;
• для спокойной сцены 24–30 fps обычно достаточно;
• уберите аудиодорожку у немого фонового видео;
• сделайте отдельную мобильную версию, если кадр позволяет;
• не используйте GIF для длинного полноцветного ролика.

Сравнивайте не «вес любой ценой», а качество на реальном размере блока. Слишком низкий битрейт даёт квадраты и полосы, которые особенно заметны в градиентах и движении.

Как не заставить видео тормозить всю страницу

preload="metadata" позволяет узнать длительность и размеры, не скачивая ролик целиком. Для видео ниже первого экрана можно начать ещё осторожнее с preload="none" и загрузить источник при приближении блока.

Обложку poster сжимайте как обычное изображение — WebP/AVIF с корректным размером. Она участвует в первом впечатлении и может стать элементом LCP, поэтому не отправляйте фотографию на 5 МБ.

Для MP4 полезен Fast Start: служебный блок moov размещается в начале, чтобы воспроизведение стартовало до полной загрузки.

Autoplay: почему без muted он не работает

Браузеры обычно блокируют автоматическое видео со звуком. Для фонового ролика используют:

<video autoplay muted loop playsinline ...>

muted отключает звук, playsinline помогает не раскрывать ролик на весь экран на телефоне, loop зацикливает. Но автозапуск — не обязанность браузера: режим экономии трафика, батареи или пользовательские настройки могут его остановить.

Добавьте статичную обложку и не прячьте важный смысл только внутри автоматически запускающегося видео.

Субтитры, управление и доступность

• оставьте controls у содержательного видео;
• добавьте субтитры через <track kind="captions">;
• не запускайте звук без действия пользователя;
• не делайте мигающий фон, который нельзя остановить;
• для демонстрации интерфейса добавьте текстовое описание ключевых шагов;
• учитывайте prefers-reduced-motion и давайте статичную альтернативу.

Субтитры полезны всем: многие смотрят ролики без звука, а поисковым и вспомогательным технологиям нужен текстовый контекст.

Как подготовить оба файла

Если исходник MP4, сделайте WebM-версию. Если получили WebM из редактора, создайте MP4 fallback. Храните одинаковое разрешение, длительность и кадрирование, чтобы браузер не менял геометрию блока.

После скачивания проверьте файлы не только двойным щелчком, но и в реальном теге video на HTTPS-странице.

Чек-лист перед публикацией

1. WebM и MP4 открываются и имеют одинаковую длительность.
2. У MP4 — H.264/AAC, у WebM — VP9/Opus или AV1/Opus.
3. Указаны width/height или aspect-ratio — страница не прыгает.
4. Есть лёгкий poster правильного размера.
5. На мобильном не включается неожиданный полный экран.
6. Субтитры читаются, управление доступно с клавиатуры.
7. Страница проверена на медленной сети и без автозапуска.
8. Сервер отдаёт корректные MIME-типы video/webm и video/mp4.