← Tous les articles

Tutoriels

Contrôlez la vitesse de lecture vidéo sur n'importe quel site

17 mai 2026 · par JustZix Team

La plupart des lecteurs vidéo plafonnent la vitesse à 2x ou masquent entièrement le contrôle. Le navigateur n'a pas cette limite. Une courte règle JustZix vous donne un contrôle fin de la vitesse sur chaque vidéo de la page, peu importe qui a construit le lecteur.

Pourquoi une règle bat l'interface du lecteur

Le HTMLMediaElement natif expose une propriété playbackRate. L'habillage du lecteur n'est qu'un revêtement par-dessus. Quand vous réglez playbackRate directement, vous contournez le revêtement et parlez à l'élément. JustZix vous permet d'attacher ce code à un motif d'URL pour qu'il s'exécute automatiquement chaque fois que vous ouvrez une page correspondante.

La recette minimale

Créez une règle JavaScript limitée aux sites où vous regardez de longues vidéos. Ce snippet règle chaque vidéo à 1,5x et peut être exécuté plusieurs fois sans danger :

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

Cela fonctionne pour les vidéos déjà dans le DOM. Beaucoup de sites chargent le lecteur après la page, donc vous voulez aussi attraper les vidéos qui apparaissent plus tard.

Attraper les vidéos ajoutées plus tard

Un MutationObserver surveille le document et applique votre vitesse à toute nouvelle vidéo. Il est défensif : il ne lève jamais d'erreur si un nœud n'est pas un élément.

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

Une subtilité : certains lecteurs réinitialisent playbackRate au démarrage d'un nouveau clip. Pour y survivre, écoutez aussi les événements ratechange et loadeddata et réappliquez votre valeur.

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

Le troisième argument true active la capture, donc le gestionnaire se déclenche même si les événements média ne remontent pas.

Raccourcis clavier et badge de vitesse

Regarder des tutoriels est plus facile quand vous pouvez ajuster la vitesse sans chercher un menu. Cette règle lie les touches crochet pour faire varier la vitesse et affiche un petit badge dans le coin.

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

Le badge utilise le z-index le plus élevé possible pour rester visible au-dessus des lecteurs en plein écran, et il ignore les frappes pendant que vous tapez dans un champ de formulaire.

Limiter la règle

• Associez des motifs larges comme *://*.example.com/* pour un seul site, ou un caractère générique pour toute une classe de pages.
• Gardez une règle par site pour pouvoir donner à chacun sa propre vitesse par défaut.
• Désactivez une règle depuis le popup si un lecteur se comporte mal, plutôt que de la supprimer.

Parcourez nos exemples prêts à l'emploi pour une version à copier-coller de cette règle, ou téléchargez JustZix pour commencer. Une fois la vitesse réglée, l'étape suivante est de récupérer le bouton image dans l'image — voyez ajouter un bouton image dans l'image à n'importe quelle vidéo.