← Wszystkie wpisy

Poradniki

Zatrzymaj autoodtwarzanie wideo i audio na każdej stronie

17 maja 2026 · autor JustZix Team

Niewiele rzeczy jest gorszych niż otwarcie karty i bombardowanie dźwiękiem. Polityki autoodtwarzania przeglądarek pomagają, ale wyciszone wideo nadal się rusza, a dźwięk w tle nadal się przemyka. Reguła JustZix wyłącza to wszystko w chwili, gdy się zaczyna.

Strategia

Zamiast próbować przewidzieć, który element zacznie się automatycznie odtwarzać, reagujesz. Każdy element mediów wywołuje zdarzenie play, gdy się zaczyna. Nasłuchuj tego zdarzenia w trybie przechwytywania, a jeśli odtwarzanie nie zostało uruchomione przez ciebie, wstrzymaj je.

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

To jest tępe: wstrzymuje wszystko, w tym filmy, które klikasz. Pełny przepis poniżej dodaje listę dozwoleń, by twoje własne kliknięcia nadal działały.

Wstrzymaj autoodtwarzanie, ale zachowaj działanie kliknięć

Sztuczka polega na zapisaniu znacznika czasu za każdym razem, gdy użytkownik wchodzi w interakcję ze stroną. Jeśli zdarzenie play uruchamia się daleko od jakiejkolwiek interakcji, to autoodtwarzanie i zostaje wstrzymane.

(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);
})();

Okno 800 milisekund jest na tyle hojne, by zaliczyć kliknięcie jako zamierzone, łapiąc jednocześnie media startujące przy załadowaniu strony. Ustawienie autoplay = false powstrzymuje element przed ponawianiem próby.

Wyciszenie jako rozwiązanie awaryjne

Niektóre odtwarzacze są uparte i restartują odtwarzanie w pętli. Zamiast walczyć w niekończącej się bitwie wstrzymywania, najpierw wycisz, by strona była przynajmniej cicha, a potem wstrzymaj.

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);

Wyciszenie plus zerowa głośność obejmuje zarówno prostą flagę muted, jak i odtwarzacze, które czytają volume bezpośrednio.

Domyślnie wycisz nowe media

Możesz też być proaktywny. Ta reguła wycisza każdy element mediów, gdy tylko się pojawi, zanim ma szansę narobić hałasu. Dobrze współgra z logiką wstrzymywania powyżej.

(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 });
})();

Na co uważać

• Jeśli zaufana strona zawsze automatycznie odtwarza treść, której chcesz, wyłącz tam regułę z popupu.
• Odtwarzacze muzyki w tle na stronach osobistych też zostają złapane; dodaj je do białej listy węższym wzorcem URL.
• Flaga przechwytywania (true) jest niezbędna, bo zdarzenia play nie propagują w górę.

Zdobądź gotową wersję w naszych gotowych przykładach lub pobierz JustZix. Gdy strony są ciche, możesz chcieć z powrotem prawdziwych kontrolek — zobacz wymuś natywne kontrolki na każdym wideo.