← Alle Beiträge

Anleitungen

HTML5-Videogeschwindigkeit steuern — über 2x hinaus, mit Tastenkürzeln

15 Mai 2026 · von JustZix Team

Der eingebaute Videoplayer gibt dir bis zu 2x Geschwindigkeit und das war's. Manchmal willst du eine Vorlesung mit 2,75x oder eine Webcam-Aufnahme mit 0,5x. Eine JustZix-Regel ergänzt jeden HTML5-Player um Geschwindigkeitssteuerung per Tastatur — YouTube, Vimeo, Online-Kurse, alles.

Warum 2x nicht das Limit ist

Das <video>-Element hat eine playbackRate-Eigenschaft und sie hat auf HTML-Seite keine Obergrenze — es ist die UI des Players, die den Regler künstlich bei 2x kappt. Indem du playbackRate aus Code setzt, umgehst du diesen Regler komplett.

Die Regel

URL-Muster: eine Video-Seite (z. B. *://*.youtube.com/*) oder * global. Das JavaScript der Regel:

document.addEventListener('keydown', (e) => {
  if (/input|textarea/i.test(e.target.tagName)) return;
  const v = document.querySelector('video');
  if (!v) return;
  if (e.key === 'd') v.playbackRate += 0.25;
  if (e.key === 's') v.playbackRate = Math.max(0.25, v.playbackRate - 0.25);
  if (e.key === 'r') v.playbackRate = 1;
});

Tasten: D beschleunigt um 0,25x, S verlangsamt, R setzt auf 1x zurück.

Wie es funktioniert

• Der input/textarea-Wächter. Die erste Zeile verwirft Events, während du in ein Textfeld tippst — ohne sie würde ein „d" in einem Kommentar die Geschwindigkeit ändern.
• querySelector('video'). Wir nehmen das erste Video-Element. Auf Seiten mit einem einzigen Player reicht das.
• Der 0,25x-Schritt. Klein, damit du präzise auf ein angenehmes Tempo triffst.

Erweiterungen — Sprung und Bild-in-Bild

Pfeiltasten-Sprung und Bild-in-Bild lassen sich leicht ergänzen:

if (e.key === 'ArrowRight') v.currentTime += 10;
if (e.key === 'ArrowLeft')  v.currentTime -= 10;
if (e.key === 'p') {
  document.pictureInPictureElement
    ? document.exitPictureInPicture()
    : v.requestPictureInPicture();
}

Eine Regler-Variante — die SLIDER-Aktion

Lieber ein Regler als Tasten? Mach eine SLIDER-Aktion in der JustZix-Aktionsleiste — du ziehst sie, und der Aktionscode setzt document.querySelector('video').playbackRate auf den Reglerwert. Geschwindigkeit unter dem Daumen, keine Tasten zu merken.

Fallstricke

• Sehr hohe Geschwindigkeit verliert den Ton. Über etwa 4x schaltet der Browser oft das Audio stumm — das ist ein Engine-Limit, kein Regelfehler.
• SPAs und Videowechsel. Auf YouTube ist das nächste Video dasselbe <video>-Element — querySelector im Handler liest den aktuellen Zustand, also funktioniert es nach dem Wechsel zum nächsten Clip.
• Werbung ist auch Video. Manchmal trifft querySelector('video') den Werbe-Player. Sobald die Werbung endet, bist du wieder beim echten.

Siehe auch

• Beispiele — das Video-Snippet und anderer fertiger Code
• YouTube power-user — mehr YouTube-Regeln
• Die SLIDER-Aktion — ein Regler als Steuerelement

Installiere JustZix — und schau in deinem Tempo, nicht im Tempo des Players.