← Todos los artículos

Tutoriales

Detén la reproducción automática de vídeo y audio en cada página

17 mayo 2026 · por JustZix Team

Pocas cosas son peores que abrir una pestaña y recibir una explosión de sonido. Las políticas de reproducción automática del navegador ayudan, pero el vídeo silenciado sigue moviéndose y el audio de fondo aún se cuela. Una regla de JustZix lo apaga todo en el instante en que empieza.

La estrategia

En lugar de intentar predecir qué elemento se reproducirá automáticamente, reaccionas. Cada elemento de medios dispara un evento play cuando empieza. Escucha ese evento en modo captura, y si la reproducción no la iniciaste tú, pausa.

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

Esto es contundente: pausa todo, incluidos los vídeos en los que haces clic. La receta completa de abajo añade una lista de permitidos para que tus propios clics sigan funcionando.

Pausar la reproducción automática pero mantener los clics funcionando

El truco es registrar una marca de tiempo cada vez que el usuario interactúa con la página. Si un evento play se dispara lejos de cualquier interacción, es reproducción automática y se 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 ventana de 800 milisegundos es lo bastante generosa para contar un clic como intencionado mientras sigue atrapando los medios que empiezan al cargar la página. Fijar autoplay = false impide que el elemento reintente.

Silenciar como respaldo

Algunos reproductores son persistentes y reinician la reproducción en bucle. En lugar de pelear una batalla de pausas interminable, silencia primero para que la página esté al menos en silencio y luego 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);

Silenciar más volumen cero cubre tanto el simple indicador de silencio como los reproductores que leen volume directamente.

Silenciar por defecto los medios nuevos

También puedes ser proactivo. Esta regla silencia cualquier elemento de medios en cuanto aparece, antes de que tenga la oportunidad de hacer ruido. Se empareja bien con la lógica de pausa de arriba.

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

Cosas a vigilar

• Si un sitio en el que confías siempre reproduce automáticamente contenido que quieres, desactiva la regla ahí desde la ventana emergente.
• Los reproductores de música de fondo en sitios personales también se atrapan; añádelos a la lista blanca con un patrón de URL más estrecho.
• El indicador de captura (true) es esencial porque los eventos play no se propagan.

Consigue una versión lista en nuestros ejemplos listos para usar o descarga JustZix. Una vez que las páginas estén en silencio, quizá quieras recuperar controles reales — consulta forzar controles nativos en cada vídeo.