Die Video-Wiedergabegeschwindigkeit auf jeder Seite steuern
Die meisten Videoplayer begrenzen die Geschwindigkeit bei 2x oder verstecken die Steuerung ganz. Der Browser hat diese Grenze nicht. Eine kurze JustZix-Regel gibt Ihnen feinkörnige Geschwindigkeitssteuerung über jedes Video auf der Seite, egal wer den Player gebaut hat.
Warum eine Regel die Player-UI schlägt
Das native HTMLMediaElement gibt eine playbackRate-Eigenschaft preis. Die Player-Oberfläche ist nur eine Hülle darüber. Wenn Sie playbackRate direkt setzen, umgehen Sie die Hülle und sprechen mit dem Element. JustZix lässt Sie diesen Code an ein URL-Muster anhängen, sodass er automatisch jedes Mal läuft, wenn Sie eine passende Seite öffnen.
Das minimale Rezept
Erstellen Sie eine JavaScript-Regel, die auf die Seiten beschränkt ist, wo Sie lange Videos schauen. Dieses Snippet setzt jedes Video auf 1,5x und kann sicher mehr als einmal laufen:
document.querySelectorAll('video').forEach(function (v) {
v.playbackRate = 1.5;
});
Das funktioniert für Videos, die bereits im DOM sind. Viele Seiten laden den Player nach der Seite, also wollen Sie auch Videos erfassen, die später erscheinen.
Später hinzugefügte Videos erfassen
Ein MutationObserver beobachtet das Dokument und wendet Ihre Geschwindigkeit auf jedes neue Video an. Er ist defensiv: Er wirft nie einen Fehler, wenn ein Knoten kein Element ist.
(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 });
})();
Eine Feinheit: Manche Player setzen playbackRate zurück, wenn ein neuer Clip startet. Um das zu überstehen, hören Sie auch auf die Ereignisse ratechange und loadeddata und wenden Sie Ihren Wert erneut an.
document.addEventListener('loadeddata', function (e) {
var v = e.target;
if (v && v.tagName === 'VIDEO') { v.playbackRate = 1.5; }
}, true);
Das dritte Argument true aktiviert Capture, sodass der Handler auslöst, obwohl Medienereignisse nicht aufsteigen.
Tastenkürzel und ein Geschwindigkeits-Abzeichen
Tutorials anzusehen ist leichter, wenn Sie die Geschwindigkeit anstupsen können, ohne ein Menü zu suchen. Diese Regel belegt die Klammertasten, um die Geschwindigkeit zu schrittweise zu ändern, und zeigt ein kleines Abzeichen in der Ecke.
(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); }
});
})();
Das Abzeichen verwendet den höchsten praktischen z-index, sodass es über Vollbild-Playern sichtbar bleibt, und es ignoriert Tastenanschläge, während Sie in ein Formularfeld tippen.
Die Regel beschränken
- Ordnen Sie breite Muster wie
*://*.example.com/*für eine einzelne Seite zu, oder einen Platzhalter für eine ganze Klasse von Seiten. - Behalten Sie eine Regel pro Seite, sodass Sie jeder ihre eigene Standardgeschwindigkeit geben können.
- Deaktivieren Sie eine Regel aus dem Popup, wenn ein Player sich schlecht verhält, statt sie zu löschen.
Durchstöbern Sie unsere fertigen Beispiele für eine kopierfertige Version dieser Regel oder laden Sie JustZix herunter, um loszulegen. Wenn Sie mit der Geschwindigkeit fertig sind, ist der nächste Schritt, die Bild-in-Bild-Schaltfläche zurückzugewinnen — siehe eine Bild-in-Bild-Schaltfläche zu jedem Video hinzufügen.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.