← Todos los artículos

Tutoriales

Control de velocidad de vídeo HTML5 — más allá del 2x, con atajos de teclado

15 mayo 2026 · por JustZix Team

El reproductor de vídeo integrado te da hasta 2x de velocidad y ya. A veces quieres una clase a 2,75x, o una grabación de webcam a 0,5x. Una regla JustZix añade el control de la velocidad por teclado a cada reproductor HTML5 — YouTube, Vimeo, cursos online, lo que sea.

Por qué 2x no es el límite

El elemento <video> tiene una propiedad playbackRate y no tiene ningún límite superior desde el lado HTML — es la UI del reproductor la que limita artificialmente el cursor a 2x. Estableciendo playbackRate desde el código, esquivas completamente ese cursor.

La regla

Patrón de URL: un sitio de vídeo (p. ej. *://*.youtube.com/*) o * globalmente. El JavaScript de la regla:

document.addEventListener('keydown', (e) => {
  if (/input|textarea/i.test(e.target.tagName)) return;
  const v = document.querySelector('video');
  if (!v) return;
  if (e.key === 'd') v.playbackRate += 0.25;
  if (e.key === 's') v.playbackRate = Math.max(0.25, v.playbackRate - 0.25);
  if (e.key === 'r') v.playbackRate = 1;
});

Teclas: D acelera 0,25x, S ralentiza, R devuelve a 1x.

Cómo funciona

• El guarda sobre input/textarea. La primera línea descarta los eventos mientras escribes en un campo de texto — sin él, una «d» en un comentario cambiaría la velocidad.
• querySelector('video'). Cogemos el primer elemento vídeo. En páginas con un solo reproductor basta.
• El paso de 0,25x. Pequeño, así centras con precisión un ritmo cómodo.

Extensiones — salto y Picture-in-Picture

Es fácil añadir el salto con las flechas y el picture-in-picture:

if (e.key === 'ArrowRight') v.currentTime += 10;
if (e.key === 'ArrowLeft')  v.currentTime -= 10;
if (e.key === 'p') {
  document.pictureInPictureElement
    ? document.exitPictureInPicture()
    : v.requestPictureInPicture();
}

Una variante con cursor — la acción SLIDER

¿Prefieres un cursor a las teclas? Crea una acción SLIDER en la barra de acciones JustZix — lo arrastras, y el código de la acción establece document.querySelector('video').playbackRate al valor del cursor. La velocidad bajo el pulgar, ninguna tecla que memorizar.

Trampas

• Una velocidad muy alta pierde el audio. Más allá de unos 4x el navegador a menudo silencia el audio — es un límite del motor, no un bug de la regla.
• SPA y cambio de vídeo. En YouTube el vídeo siguiente es el mismo elemento <video> — querySelector dentro del handler lee el estado actual, así que funciona tras pasar al clip siguiente.
• Los anuncios también son vídeos. A veces querySelector('video') golpea el reproductor del anuncio. Una vez terminado el anuncio, vuelves al verdadero.

Mira también

• Ejemplos — el snippet de vídeo y otro código listo para usar
• YouTube power-user — otras reglas para YouTube
• La acción SLIDER — un cursor como control

Instala JustZix — y mira a tu ritmo, no al del reproductor.