← Tutti gli articoli

Tutorial

Controlla la velocità di riproduzione video su qualsiasi sito

La maggior parte dei lettori video limita la velocità a 2x o nasconde del tutto il controllo. Il browser non ha questo limite. Una breve regola JustZix ti dà un controllo fine della velocità su ogni video della pagina, indipendentemente da chi ha costruito il lettore.

Perché una regola batte l'interfaccia del lettore

L'elemento nativo HTMLMediaElement espone una proprietà playbackRate. L'interfaccia del lettore è solo una pelle sopra di essa. Quando imposti playbackRate direttamente bypassi la pelle e parli con l'elemento. JustZix ti permette di associare quel codice a un pattern URL così viene eseguito automaticamente ogni volta che apri una pagina corrispondente.

La ricetta minima

Crea una regola JavaScript limitata ai siti dove guardi video lunghi. Questo snippet imposta ogni video a 1,5x ed è sicuro da eseguire più di una volta:

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

Questo funziona per i video già nel DOM. Molti siti caricano il lettore dopo la pagina, quindi vuoi anche catturare i video che appaiono più tardi.

Catturare i video aggiunti più tardi

Un MutationObserver sorveglia il documento e applica la tua velocità a qualsiasi nuovo video. È difensivo: non lancia mai eccezioni se un nodo non è 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 sottigliezza: alcuni lettori reimpostano playbackRate quando inizia una nuova clip. Per sopravvivere a questo, ascolta anche gli eventi ratechange e loadeddata e riapplica il tuo valore.

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

Il terzo argomento true abilita la cattura, così il gestore si attiva anche se gli eventi dei media non risalgono.

Scorciatoie da tastiera e un badge di velocità

Guardare tutorial è più facile quando puoi regolare la velocità senza cercare un menu. Questa regola associa i tasti parentesi quadre per variare la velocità a passi e mostra un piccolo badge nell'angolo.

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

Il badge usa il più alto z-index pratico così resta visibile sopra i lettori a schermo intero, e ignora le pressioni di tasti mentre stai scrivendo in un campo di un modulo.

Limitare la regola

Sfoglia i nostri esempi pronti all'uso per una versione copia-incolla di questa regola, oppure scarica JustZix per iniziare. Quando hai finito con la velocità, il passo successivo è riconquistare il pulsante picture-in-picture — vedi come aggiungere un pulsante picture-in-picture a qualsiasi video.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso