← Tous les articles

Tutoriels

Arrêtez la lecture automatique vidéo et audio sur chaque page

17 mai 2026 · par JustZix Team

Peu de choses sont pires que d'ouvrir un onglet et de se faire bombarder de son. Les politiques de lecture automatique des navigateurs aident, mais une vidéo muette bouge encore et l'audio d'arrière-plan se faufile toujours. Une règle JustZix coupe tout cela dès que ça démarre.

La stratégie

Au lieu d'essayer de prédire quel élément se lancera automatiquement, vous réagissez. Chaque élément média déclenche un événement play à son démarrage. Écoutez cet événement en mode capture, et si la lecture n'a pas été lancée par vous, mettez-la en pause.

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

C'est brutal : cela met tout en pause, y compris les vidéos que vous cliquez. La recette complète ci-dessous ajoute une liste d'autorisation pour que vos propres clics fonctionnent encore.

Mettre en pause la lecture automatique mais garder les clics fonctionnels

L'astuce est d'enregistrer un horodatage chaque fois que l'utilisateur interagit avec la page. Si un événement play se déclenche loin de toute interaction, c'est de la lecture automatique et il est mis en pause.

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

Une fenêtre de 800 millisecondes est assez généreuse pour compter un clic comme intentionnel tout en attrapant le média qui démarre au chargement de la page. Régler autoplay = false empêche l'élément de réessayer.

Couper le son comme repli

Certains lecteurs sont persistants et relancent la lecture en boucle. Plutôt que de mener une bataille de pause sans fin, coupez d'abord le son pour que la page soit au moins silencieuse, puis mettez en pause.

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

Couper le son plus volume zéro couvre à la fois le simple drapeau muted et les lecteurs qui lisent volume directement.

Couper le son des nouveaux médias par défaut

Vous pouvez aussi être proactif. Cette règle coupe le son de tout élément média dès qu'il apparaît, avant qu'il n'ait la chance de faire du bruit. Elle se marie bien avec la logique de pause ci-dessus.

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

Points à surveiller

• Si un site de confiance lance toujours automatiquement un contenu que vous voulez, désactivez-y la règle depuis le popup.
• Les lecteurs de musique de fond sur les sites personnels sont attrapés aussi ; mettez-les en liste blanche avec un motif d'URL plus étroit.
• Le drapeau de capture (true) est essentiel car les événements play ne remontent pas.

Récupérez une version prête dans nos exemples prêts à l'emploi ou téléchargez JustZix. Une fois les pages silencieuses, vous voudrez peut-être de vrais contrôles — voyez forcer les contrôles natifs sur chaque vidéo.