Автозапуск видео на сайте: почему не работает и как настроить

Вы добавили на страницу видео с атрибутом autoplay, а оно стоит на первом кадре. Или запускается на компьютере, но не на iPhone. Или работало вчера, а после добавления звука перестало. Почти всегда дело не в ошибке кода, а в правилах автовоспроизведения, которые браузеры ввели, чтобы сайты не включали звук без спроса.

В статье разберём, по каким правилам браузеры разрешают автозапуск видео на сайте, какой код работает везде, почему autoplay не срабатывает, как быть с YouTube и другими плеерами в iframe и когда автозапуск лучше не включать вовсе.

Главное правило: без звука можно, со звуком почти никогда

Chrome, Safari, Firefox, Edge и Яндекс Браузер ведут себя похоже:

• Видео без звука (с атрибутом muted или без звуковой дорожки) запускается само. Это разрешено по умолчанию.
• Видео со звуком браузер запускает сам только в особых случаях: посетитель уже нажимал что-то на этом сайте, часто смотрит на нём видео со звуком или установил сайт как приложение. Рассчитывать на это нельзя: для нового посетителя автозапуск со звуком будет заблокирован.
• Посетитель может запретить автозапуск совсем. В Safari на Mac это настройка сайта «Автовоспроизведение», в Firefox — блокировка аудио и видео в настройках разрешений. Тогда не запустится даже видео без звука.

Отсюда вывод: автозапуск — это всегда видео без звука. Звук включает сам посетитель, нажав на ролик или кнопку.

Код, который работает во всех браузерах

Минимальный набор атрибутов для тега <video>:

<video autoplay muted loop playsinline
       poster="/video/hero.jpg" preload="auto">
  <source src="/video/hero.webm" type="video/webm">
  <source src="/video/hero.mp4" type="video/mp4">
</video>

Что делает каждый атрибут:

Атрибут	Зачем нужен
autoplay	Запустить воспроизведение, как только браузеру хватит данных.
muted	Выключить звук. Без него автозапуск заблокируют.
playsinline	Играть прямо на странице. Без него iPhone пытается открыть видео на весь экран и сам не запускает.
loop	Повторять по кругу. Нужен для фона и коротких превью.
poster	Картинка до старта и на случай, если автозапуск запрещён.
preload	Сколько загружать заранее. Для автозапуска первого экрана подходит auto, для видео ниже — none и запуск скриптом.

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

Почему не работает автозапуск видео

Если видео не стартует, проверьте причины по порядку.

1. Нет muted в итоговой разметке. Откройте инструменты разработчика и посмотрите тег <video> на живой странице. Конструкторы сайтов, плагины и фреймворки иногда выбрасывают атрибут. В React, например, muted в JSX выставляет свойство элемента, но не всегда попадает в HTML, который отдаёт сервер. Надёжнее перед запуском выставить video.muted = true скриптом.
2. Нет playsinline. Самая частая причина «на компьютере работает, на iPhone нет».
3. Включён режим энергосбережения. На iPhone в режиме энергосбережения видео может не запускаться само даже с правильными атрибутами. Сайт на это повлиять не может, поэтому нужен poster и понятная кнопка воспроизведения.
4. Видео вставлено скриптом. Если элемент создаётся через JavaScript, задайте muted свойством до вызова play(), а не только атрибутом в строке HTML.
5. Файл не открывается в этом браузере. MOV с iPhone или ролик в HEVC (H.265) может не воспроизвестись в части браузеров, и выглядит это так же, как запрет автозапуска. Добавьте источник MP4 с кодеком H.264. Как подготовить файл, рассказано в статье как сжать видео для сайта.
6. Сервер отдаёт файл с неверным типом или без поддержки частичной загрузки (ответ 206 на запрос с заголовком Range). Safari к этому особенно чувствителен.
7. Видео скрыто. Браузеры могут ставить на паузу ролик без звука, который не виден на экране, и запускать снова при появлении. Это экономит батарею и обычно не мешает, но учитывайте при отладке.

Как проверить, запустилось ли видео

Метод play() возвращает Promise. Если браузер запретил запуск, Promise завершается ошибкой NotAllowedError, и это можно обработать: показать кнопку воспроизведения вместо застывшего кадра.

const video = document.querySelector('video');
video.muted = true;
video.play().catch(() => {
  // Автозапуск запрещён: показываем кнопку
  document.querySelector('.play-button').hidden = false;
});

Если нужно включать звук, делайте это только в обработчике нажатия: button.addEventListener('click', () => { video.muted = false; video.play(); }). Действие посетителя снимает запрет.

Автозапуск только когда видео на экране

Ролик в середине длинной страницы незачем загружать и проигрывать, пока до него не долистали. Атрибут loading="lazy" для <video> не работает, он поддерживается только картинками и iframe. Вместо него используют IntersectionObserver:

const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    const v = e.target;
    if (e.isIntersecting) {
      if (!v.src) v.src = v.dataset.src;
      v.play().catch(() => {});
    } else {
      v.pause();
    }
  });
}, { threshold: 0.5 });
document.querySelectorAll('video[data-src]').forEach(v => io.observe(v));

У такого видео в разметке нет src, только data-src, атрибуты muted playsinline loop и preload="none". Файл начинает загружаться, когда ролик наполовину показался на экране, и встаёт на паузу, когда уходит из виду.

Автозапуск YouTube, RuTube и VK Видео

Плеер видеохостинга вставляется тегом <iframe>, и правила для него те же, плюс ещё два условия.

• Разрешение для фрейма. У тега iframe должен быть атрибут allow="autoplay", иначе браузер не даст чужому плееру запуститься самому.
• Параметры в адресе плеера. У YouTube это ?autoplay=1&mute=1, а для повтора по кругу ещё loop=1&playlist=ID_ролика. У RuTube и VK Видео свои параметры: смотрите код вставки в меню «Поделиться» и справку плеера.

<iframe src="https://www.youtube.com/embed/ID?autoplay=1&mute=1"
        allow="autoplay; encrypted-media; picture-in-picture"
        allowfullscreen loading="lazy"></iframe>

Учтите, что плеер видеохостинга сам решает, что показать до и после ролика, и подгружает много своих скриптов. Для фона первого экрана его обычно не используют. Сравнение способов вставки видео: как добавить видео на сайт.

Когда автозапуск вредит

Видео, которое запускается само, привлекает внимание. Но у этого есть цена.

• Скорость. Ролик в первом экране конкурирует за канал с заголовком, картинками и шрифтами. Тяжёлый файл замедляет загрузку как раз той части страницы, которую ждут первой.
• Трафик посетителя. На мобильном интернете автозапуск тратит чужие мегабайты. Можно не загружать видео, если в браузере включена экономия трафика (свойство navigator.connection.saveData там, где оно поддерживается), или показывать на телефоне картинку.
• Доступность. Движущийся контент дольше пяти секунд должен останавливаться по желанию посетителя: этого требуют рекомендации WCAG. Добавьте кнопку паузы и учитывайте настройку системы «уменьшить движение» через медиазапрос prefers-reduced-motion.
• Отвлечение. Видео, которое мелькает рядом с формой заказа или текстом статьи, мешает читать. Автозапуск уместен там, где видео и есть главное содержание экрана.

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero { background: url(/video/hero.jpg) center / cover; }
}

Автозапуск без звука, звук по нажатию: как это сделано в видеовиджете

Схема «видео играет само без звука, а со звуком по желанию» хорошо подходит не только для фона, но и для ролика с речью: приветствия, визитки, отзыва, обзора товара. Так работает видеовиджет Видвиджет, и все правила выше в нём уже учтены:

• в углу страницы небольшое превью: ролик играет по кругу без звука, с атрибутами autoplay muted loop playsinline;
• по нажатию виджет раскрывается, ролик начинается с начала и включается звук: действие посетителя снимает запрет браузера;
• видео начинает загружаться, когда страница уже готова, и не задерживает вёрстку сайта;
• если показ на телефонах выключен в настройках, ролик на телефоне не загружается вовсе;
• настройка «Не загружать после закрытия»: посетитель закрыл виджет — и в течение суток ролик ему не загружается и не показывается;
• под видео кнопка со своей ссылкой, а открытия виджета и нажатия на кнопку можно отправлять целями в Яндекс Метрику.

Ролик загружается файлом, сервис сам перекодирует его для браузера, а на сайт вставляется одна строка кода. Короткие ролики в таком формате подробно описаны на странице видео в кружке на сайт.

Чек-лист автозапуска

• У видео есть muted и playsinline, и они видны в разметке живой страницы.
• Есть poster на случай запрета автозапуска.
• Есть источник MP4 с кодеком H.264.
• Ошибка play() обрабатывается: посетитель видит кнопку воспроизведения.
• Видео ниже первого экрана загружается при прокрутке.
• Есть кнопка паузы, учтена настройка «уменьшить движение».
• Страница проверена на iPhone, в том числе в режиме энергосбережения.

Частые вопросы

Можно ли сделать автозапуск видео на сайте со звуком?

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

Почему видео запускается на компьютере, но не на iPhone?

Чаще всего не хватает атрибута playsinline: без него iPhone не проигрывает видео внутри страницы. Ещё причины: нет атрибута muted в итоговой разметке, включён режим энергосбережения или файл в формате, который браузер не воспроизводит.

Как сделать, чтобы видео запускалось только при прокрутке до него?

Уберите у тега video атрибут src, сохраните адрес в data-src и следите за элементом через IntersectionObserver: когда ролик появился на экране, подставьте адрес и вызовите play(), когда ушёл, поставьте паузу. Атрибут loading="lazy" для video не работает.

Как включить автозапуск видео с YouTube на сайте?

Добавьте в адрес плеера параметры autoplay=1 и mute=1, а тегу iframe атрибут allow="autoplay". Со звуком видео с YouTube само не запустится по тем же правилам браузеров.

Нужно ли настраивать автозапуск для видеовиджета Видвиджет?

Нет. Превью в углу экрана само играет без звука, а по нажатию виджет раскрывается и ролик начинается с начала со звуком. На сайт вставляется одна строка кода, один видеовиджет можно показывать бесплатно, 5 000 показов в месяц.