Ferma la riproduzione automatica di video e audio su ogni pagina
Poche cose sono peggio dell'aprire una scheda e farsi investire dal suono. Le policy di autoplay dei browser aiutano, ma il video silenziato si muove comunque e l'audio di sottofondo si insinua lo stesso. Una regola JustZix spegne tutto nell'istante in cui parte.
La strategia
Invece di provare a prevedere quale elemento partirà in automatico, reagisci. Ogni elemento media lancia un evento play quando parte. Ascolta quell'evento in modalità cattura, e se la riproduzione non è stata avviata da te, mettilo in pausa.
document.addEventListener('play', function (e) {
var m = e.target;
if (m && (m.tagName === 'VIDEO' || m.tagName === 'AUDIO')) {
m.pause();
}
}, true);
Questo è brusco: mette in pausa tutto, inclusi i video che clicchi. La ricetta completa qui sotto aggiunge una lista di permessi così i tuoi clic continuano a funzionare.
Metti in pausa l'autoplay ma fai funzionare i clic
Il trucco è registrare un timestamp ogni volta che l'utente interagisce con la pagina. Se un evento play si attiva lontano da qualsiasi interazione, è autoplay e viene messo in pausa.
(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);
})();
Una finestra di 800 millisecondi è abbastanza generosa da contare un clic come intenzionale pur catturando comunque i media che partono al caricamento della pagina. Impostare autoplay = false impedisce all'elemento di riprovare.
Silenzia come fallback
Alcuni lettori sono persistenti e riavviano la riproduzione in un loop. Anziché combattere una battaglia di pause infinita, silenzia prima così la pagina è almeno muta, poi metti in pausa.
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);
Silenziare più volume a zero copre sia il semplice flag muted sia i lettori che leggono volume direttamente.
Imposta i nuovi media come silenziati di default
Puoi anche essere proattivo. Questa regola silenzia qualsiasi elemento media non appena appare, prima che abbia la possibilità di fare rumore. Si abbina bene con la logica di pausa sopra.
(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 });
})();
Cose a cui prestare attenzione
- Se un sito di cui ti fidi riproduce sempre in automatico contenuti che vuoi, disabilita lì la regola dal popup.
- Anche i lettori di musica di sottofondo sui siti personali vengono catturati; mettili in whitelist con un pattern URL più stretto.
- Il flag di cattura (
true) è essenziale perché gli eventiplaynon risalgono.
Prendi una versione pronta nei nostri esempi pronti all'uso oppure scarica JustZix. Una volta che le pagine sono silenziose, potresti volere indietro controlli veri — vedi come forzare i controlli nativi su ogni video.
Valuta questo articolo
Nessuna valutazione — sii il primo.