← Alle Beiträge

Anleitungen

Video- und Audio-Autoplay auf jeder Seite stoppen

Wenige Dinge sind schlimmer, als einen Tab zu öffnen und mit Ton bombardiert zu werden. Browser-Autoplay-Richtlinien helfen, aber stummgeschaltetes Video bewegt sich immer noch und Hintergrund-Audio rutscht trotzdem durch. Eine JustZix-Regel schaltet alles in dem Moment ab, in dem es startet.

Die Strategie

Statt zu versuchen vorherzusagen, welches Element automatisch abspielt, reagieren Sie. Jedes Medienelement löst ein play-Ereignis aus, wenn es startet. Hören Sie im Capture-Modus auf dieses Ereignis, und wenn die Wiedergabe nicht von Ihnen gestartet wurde, pausieren Sie es.

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

Das ist plump: Es pausiert alles, einschließlich Videos, die Sie anklicken. Das vollständige Rezept unten fügt eine Erlaubnisliste hinzu, sodass Ihre eigenen Klicks weiterhin funktionieren.

Autoplay pausieren, aber Klicks am Laufen halten

Der Trick ist, einen Zeitstempel aufzuzeichnen, wann immer der Nutzer mit der Seite interagiert. Wenn ein play-Ereignis weit von jeder Interaktion auslöst, ist es Autoplay und wird pausiert.

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

Ein Fenster von 800 Millisekunden ist großzügig genug, um einen Klick als beabsichtigt zu zählen, während es trotzdem Medien erfasst, die beim Seitenladen starten. autoplay = false zu setzen stoppt das Element davon, es erneut zu versuchen.

Stummschalten als Fallback

Manche Player sind hartnäckig und starten die Wiedergabe in einer Schleife neu. Statt einen endlosen Pausenkampf zu führen, schalten Sie zuerst stumm, sodass die Seite zumindest still ist, dann pausieren Sie.

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

Stummschalten plus Null-Lautstärke deckt sowohl das einfache Stummschalt-Flag als auch Player ab, die volume direkt lesen.

Neue Medien standardmäßig stummschalten

Sie können auch proaktiv sein. Diese Regel schaltet jedes Medienelement stumm, sobald es erscheint, bevor es eine Chance hat, Lärm zu machen. Sie paart sich gut mit der Pausenlogik oben.

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

Worauf man achten sollte

Holen Sie sich eine fertige Version in unseren fertigen Beispielen oder laden Sie JustZix herunter. Sobald Seiten ruhig sind, möchten Sie vielleicht echte Steuerungen zurück — siehe native Steuerungen auf jedem Video erzwingen.

Bewerte diesen Beitrag

Noch keine Bewertungen — sei der Erste.

Probiere es selbst aus

Installiere JustZix und füge ein beliebiges Snippet aus diesem Artikel ein. Zwei Minuten von null bis zu einer funktionierenden Regel auf allen deinen Geräten.

JustZix holen

Funktionen · So funktioniert es · Beispiele · Anwendungsfälle