← Tutti gli articoli

Tutorial

Controllo della velocità video HTML5 — oltre il 2x, con scorciatoie da tastiera

15 maggio 2026 · di JustZix Team

Il lettore video integrato ti dà fino a 2x di velocità e basta. A volte vuoi una lezione a 2,75x, o una registrazione da webcam a 0,5x. Una regola JustZix aggiunge il controllo della velocità da tastiera a ogni lettore HTML5 — YouTube, Vimeo, corsi online, qualsiasi cosa.

Perché 2x non è il limite

L'elemento <video> ha una proprietà playbackRate e non ha alcun limite superiore dal lato HTML — è l'UI del lettore che limita artificialmente il cursore a 2x. Impostando playbackRate dal codice, aggiri completamente quel cursore.

La regola

Pattern di URL: un sito video (es. *://*.youtube.com/*) o * globalmente. Il JavaScript della regola:

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

Tasti: D accelera di 0,25x, S rallenta, R riporta a 1x.

Come funziona

• La guardia su input/textarea. La prima riga scarta gli eventi mentre stai digitando in un campo di testo — senza di essa, una «d» in un commento cambierebbe la velocità.
• querySelector('video'). Prendiamo il primo elemento video. Su pagine con un solo lettore basta.
• Il passo di 0,25x. Piccolo, così centri con precisione un ritmo comodo.

Estensioni — salto e Picture-in-Picture

È facile aggiungere il salto con le frecce e il 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 cursore — l'azione SLIDER

Preferisci un cursore ai tasti? Crea un'azione SLIDER nella barra delle azioni JustZix — lo trascini, e il codice dell'azione imposta document.querySelector('video').playbackRate sul valore del cursore. La velocità sotto il pollice, nessun tasto da memorizzare.

Trappole

• Una velocità molto alta perde l'audio. Oltre circa 4x il browser spesso disattiva l'audio — è un limite del motore, non un bug della regola.
• SPA e cambio video. Su YouTube il video successivo è lo stesso elemento <video> — querySelector dentro l'handler legge lo stato corrente, quindi funziona dopo il passaggio al clip successivo.
• Anche le pubblicità sono video. A volte querySelector('video') colpisce il lettore della pubblicità. Una volta finita la pubblicità, torni su quello vero.

Vedi anche

• Esempi — lo snippet video e altro codice pronto all'uso
• YouTube power-user — altre regole per YouTube
• L'azione SLIDER — un cursore come controllo

Installa JustZix — e guarda al tuo ritmo, non a quello del lettore.