← Alle Beiträge

Anleitungen

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

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.

Probiere es selbst aus

Installiere JustZix und füge ein beliebiges Snippet aus diesem Artikel ein. Zwei Minuten von null bis zu einer funktionierenden Regel auf allen deinen Geräten.

JustZix holen

Funktionen · So funktioniert es · Beispiele · Anwendungsfälle