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
- Wenn eine Seite, der Sie vertrauen, immer Inhalte automatisch abspielt, die Sie wollen, deaktivieren Sie die Regel dort aus dem Popup.
- Hintergrundmusik-Player auf persönlichen Seiten werden ebenfalls erfasst; setzen Sie sie mit einem engeren URL-Muster auf die Whitelist.
- Das Capture-Flag (
true) ist essenziell, weilplay-Ereignisse nicht aufsteigen.
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.