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
- Abbina pattern ampi come
*://*.example.com/*per un singolo sito, o un jolly per un'intera classe di pagine. - Tieni una regola per sito così puoi dare a ciascuno la sua velocità predefinita.
- Disabilita una regola dal popup se un lettore si comporta male, invece di eliminarla.
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.