← Все статьи

Туториалы

Остановите автовоспроизведение видео и аудио на каждой странице

17 мая 2026 · автор JustZix Team

Мало что хуже, чем открыть вкладку и получить взрыв звука. Политики автовоспроизведения браузера помогают, но беззвучное видео всё равно движется, а фоновое аудио всё равно просачивается. Правило JustZix вырубает всё это в тот же миг, как оно начинается.

Стратегия

Вместо попыток предсказать, какой элемент автовоспроизведётся, вы реагируете. Каждый медиаэлемент при старте выбрасывает событие play. Слушайте это событие в режиме захвата, и если воспроизведение начали не вы, ставьте его на паузу.

document.addEventListener('play', function (e) {
  var m = e.target;
  if (m && (m.tagName === 'VIDEO' || m.tagName === 'AUDIO')) {
    m.pause();
  }
}, true);

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

Останавливайте автовоспроизведение, но сохраняйте работу кликов

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

(function () {
  var lastInteraction = 0;
  ['pointerdown', 'keydown', 'touchstart'].forEach(function (evt) {
    document.addEventListener(evt, function () {
      lastInteraction = Date.now();
    }, true);
  });

  document.addEventListener('play', function (e) {
    var m = e.target;
    if (!m || (m.tagName !== 'VIDEO' && m.tagName !== 'AUDIO')) { return; }
    var sinceClick = Date.now() - lastInteraction;
    if (sinceClick > 800) {
      m.pause();
      m.autoplay = false;
    }
  }, true);
})();

Окно в 800 миллисекунд достаточно щедрое, чтобы считать клик намеренным, но всё же ловит медиа, стартующее при загрузке страницы. Установка autoplay = false не даёт элементу повторять попытки.

Заглушение как запасной вариант

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

document.addEventListener('play', function (e) {
  var m = e.target;
  if (m && (m.tagName === 'VIDEO' || m.tagName === 'AUDIO')) {
    m.muted = true;
    m.volume = 0;
    m.pause();
  }
}, true);

Заглушение плюс нулевая громкость покрывают и простой флаг muted, и плееры, которые читают volume напрямую.

По умолчанию заглушать новое медиа

Вы также можете действовать проактивно. Это правило заглушает любой медиаэлемент, как только он появляется, прежде чем у него будет шанс издать звук. Оно хорошо сочетается с логикой паузы выше.

(function () {
  function mute(m) {
    m.muted = true;
    m.setAttribute('muted', '');
  }
  document.querySelectorAll('video, audio').forEach(mute);
  new MutationObserver(function (records) {
    records.forEach(function (rec) {
      rec.addedNodes.forEach(function (n) {
        if (n.nodeType !== 1) { return; }
        if (n.tagName === 'VIDEO' || n.tagName === 'AUDIO') { mute(n); }
        else if (n.querySelectorAll) {
          n.querySelectorAll('video, audio').forEach(mute);
        }
      });
    });
  }).observe(document.documentElement, { childList: true, subtree: true });
})();

На что обратить внимание

• Если сайт, которому вы доверяете, всегда автовоспроизводит нужный вам контент, отключите там правило из всплывающего окна.
• Фоновые музыкальные плееры на личных сайтах тоже ловятся; внесите их в белый список более узким шаблоном URL.
• Флаг захвата (true) необходим, потому что события play не всплывают.

Возьмите готовую версию в наших готовых примерах или скачайте JustZix. Когда страницы тихие, вы, возможно, захотите вернуть настоящее управление — смотрите принудите нативное управление на каждом видео.