← Todos los artículos

Tutoriales

Controla la velocidad de reproducción de vídeo en cualquier sitio

La mayoría de los reproductores de vídeo limitan la velocidad a 2x u ocultan el control por completo. El navegador no tiene ese límite. Una breve regla de JustZix te da un control de velocidad detallado en cada vídeo de la página, sin importar quién construyó el reproductor.

Por qué una regla supera a la interfaz del reproductor

El HTMLMediaElement nativo expone una propiedad playbackRate. La interfaz del reproductor es solo una piel encima de ella. Cuando fijas playbackRate directamente, esquivas la piel y hablas con el elemento. JustZix te permite adjuntar ese código a un patrón de URL para que se ejecute automáticamente cada vez que abres una página que coincide.

La receta mínima

Crea una regla JavaScript limitada a los sitios donde ves vídeos largos. Este fragmento fija cada vídeo a 1,5x y es seguro ejecutarlo más de una vez:

document.querySelectorAll('video').forEach(function (v) {
  v.playbackRate = 1.5;
});

Eso funciona para los vídeos ya en el DOM. Muchos sitios cargan el reproductor después de la página, así que también quieres atrapar los vídeos que aparecen más tarde.

Atrapar los vídeos añadidos más tarde

Un MutationObserver vigila el documento y aplica tu velocidad a cualquier vídeo nuevo. Es defensivo: nunca lanza una excepción si un nodo no es un elemento.

(function () {
  var target = 1.5;
  function apply(root) {
    var list = root.querySelectorAll ? root.querySelectorAll('video') : [];
    list.forEach(function (v) { v.playbackRate = target; });
  }
  apply(document);
  var obs = new MutationObserver(function (records) {
    records.forEach(function (rec) {
      rec.addedNodes.forEach(function (n) {
        if (n.nodeType === 1) {
          if (n.tagName === 'VIDEO') { n.playbackRate = target; }
          else { apply(n); }
        }
      });
    });
  });
  obs.observe(document.documentElement, { childList: true, subtree: true });
})();

Una sutileza: algunos reproductores reinician playbackRate cuando empieza un clip nuevo. Para sobrevivir a eso, escucha también los eventos ratechange y loadeddata y vuelve a aplicar tu valor.

document.addEventListener('loadeddata', function (e) {
  var v = e.target;
  if (v && v.tagName === 'VIDEO') { v.playbackRate = 1.5; }
}, true);

El tercer argumento true habilita la captura, así que el gestor se dispara aunque los eventos de medios no se propaguen.

Atajos de teclado y una insignia de velocidad

Ver tutoriales es más fácil cuando puedes ajustar la velocidad sin buscar un menú. Esta regla asigna las teclas de corchete para escalonar la velocidad y muestra una pequeña insignia en la esquina.

(function () {
  var speed = 1;
  var badge = document.createElement('div');
  badge.style.cssText = 'position:fixed;top:8px;right:8px;z-index:2147483647;'
    + 'background:#000;color:#fff;font:600 13px sans-serif;'
    + 'padding:4px 8px;border-radius:6px;opacity:0;transition:opacity .3s';
  document.body.appendChild(badge);
  function setSpeed(next) {
    speed = Math.min(5, Math.max(0.25, Math.round(next * 100) / 100));
    document.querySelectorAll('video').forEach(function (v) {
      v.playbackRate = speed;
    });
    badge.textContent = speed + 'x';
    badge.style.opacity = '1';
    clearTimeout(badge._t);
    badge._t = setTimeout(function () { badge.style.opacity = '0'; }, 1200);
  }
  document.addEventListener('keydown', function (e) {
    if (e.target && /INPUT|TEXTAREA/.test(e.target.tagName)) { return; }
    if (e.key === ']') { setSpeed(speed + 0.25); }
    if (e.key === '[') { setSpeed(speed - 0.25); }
    if (e.key === '\\') { setSpeed(1); }
  });
})();

La insignia usa el z-index más alto que es práctico para que se mantenga visible sobre reproductores a pantalla completa, e ignora las pulsaciones de tecla mientras escribes en un campo de formulario.

Limitar la regla

Explora nuestros ejemplos listos para usar para una versión para copiar de esta regla, o descarga JustZix para empezar. Cuando termines con la velocidad, el siguiente paso es recuperar el botón de imagen en imagen — consulta añadir un botón de imagen en imagen a cualquier vídeo.

Valora este artículo

Sin valoraciones — sé el primero.

Pruébalo tú mismo

Instala JustZix y pega cualquier snippet de este artículo. Dos minutos de cero a una regla funcionando en todos tus dispositivos.

Obtener JustZix

Funciones · Cómo funciona · Ejemplos · Casos de uso