← Tous les articles

Tutoriels

Contrôle de vitesse vidéo HTML5 — au-delà de 2x, avec des raccourcis clavier

15 mai 2026 · par JustZix Team

Le lecteur vidéo intégré vous donne jusqu'à 2x de vitesse et c'est tout. Parfois vous voulez un cours à 2,75x, ou un enregistrement webcam à 0,5x. Une règle JustZix ajoute le contrôle de vitesse au clavier à chaque lecteur HTML5 — YouTube, Vimeo, cours en ligne, n'importe quoi.

Pourquoi 2x n'est pas la limite

L'élément <video> a une propriété playbackRate et elle n'a aucune borne supérieure côté HTML — c'est l'UI du lecteur qui plafonne artificiellement le curseur à 2x. En réglant playbackRate depuis le code, vous contournez complètement ce curseur.

La règle

Motif d'URL : un site vidéo (p. ex. *://*.youtube.com/*) ou * globalement. Le JavaScript de la règle :

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

Touches : D accélère de 0,25x, S ralentit, R remet à 1x.

Comment ça marche

• Le garde input/textarea. La première ligne écarte les événements pendant que vous tapez dans un champ texte — sans elle, un « d » dans un commentaire changerait la vitesse.
• querySelector('video'). On prend le premier élément vidéo. Sur les pages avec un seul lecteur, ça suffit.
• Le pas de 0,25x. Petit, pour viser précisément un rythme confortable.

Extensions — saut et Picture-in-Picture

Il est facile d'ajouter le saut aux flèches et le 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();
}

Une variante curseur — l'action SLIDER

Vous préférez un curseur aux touches ? Faites une action SLIDER dans la barre d'actions JustZix — vous la glissez, et le code de l'action règle document.querySelector('video').playbackRate sur la valeur du curseur. La vitesse sous le pouce, aucune touche à mémoriser.

Pièges

• Une vitesse très élevée perd le son. Au-delà d'environ 4x, le navigateur coupe souvent l'audio — c'est une limite du moteur, pas un bug de la règle.
• SPA et changement de vidéo. Sur YouTube, la vidéo suivante est le même élément <video> — querySelector dans le handler lit l'état courant, donc ça marche après le passage au clip suivant.
• Les pubs sont aussi de la vidéo. Parfois querySelector('video') tombe sur le lecteur de pub. Une fois la pub finie, vous revenez sur le vrai.

À voir aussi

• Exemples — le snippet vidéo et d'autres codes prêts à l'emploi
• YouTube power-user — plus de règles YouTube
• L'action SLIDER — un curseur comme contrôle

Installez JustZix — et regardez à votre rythme, pas à celui du lecteur.