← Wszystkie wpisy

Poradniki

Sterowanie wideo HTML5 — prędkość ponad 2x i skróty klawiszowe

15 maja 2026 · autor JustZix Team

Wbudowany odtwarzacz wideo daje prędkość do 2x i tyle. A czasem chcesz wykład na 2,75x albo nagranie z kamerki na 0,5x. Jedna reguła JustZix dokłada sterowanie prędkością z klawiatury na każdym odtwarzaczu HTML5 — YouTube, Vimeo, kursy online, byle co.

Dlaczego 2x to nie limit

Element <video> ma właściwość playbackRate i ona nie ma górnego ograniczenia ze strony HTML — to interfejs odtwarzacza sztucznie obcina suwak do 2x. Ustawiając playbackRate z kodu, omijasz ten suwak całkowicie.

Reguła

Wzorzec URL: strona z wideo (np. *://*.youtube.com/*) albo * globalnie. JavaScript reguły:

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

Klawisze: D przyspiesza o 0,25x, S zwalnia, R wraca do 1x.

Jak to działa

• Strażnik na input/textarea. Pierwsza linia odrzuca zdarzenia, gdy piszesz w polu tekstowym — bez tego „d" w komentarzu zmieniałoby prędkość.
• querySelector('video'). Bierzemy pierwszy element wideo. Na stronach z jednym odtwarzaczem to wystarcza.
• Krok 0,25x. Drobny, więc precyzyjnie trafisz w wygodne tempo.

Rozszerzenia — skok i Picture-in-Picture

Łatwo dołożyć przewijanie strzałkami i tryb obrazek-w-obrazku:

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

Wariant z suwakiem — akcja SLIDER

Wolisz suwak niż klawisze? Zrób akcję typu SLIDER w pasku akcji JustZix — przeciągasz, a kod akcji ustawia document.querySelector('video').playbackRate na wartość suwaka. Masz prędkość pod kciukiem, bez zapamiętywania klawiszy.

Pułapki

• Bardzo wysoka prędkość gubi dźwięk. Powyżej około 4x przeglądarka często wycisza audio — to limit silnika, nie błąd reguły.
• SPA i zmiana wideo. Na YouTube kolejny film to ten sam element <video> — querySelector wewnątrz handlera bierze aktualny stan, więc działa po przejściu do następnego klipu.
• Reklamy to też wideo. Czasem querySelector('video') trafi w odtwarzacz reklamy. Po jej zakończeniu wracasz do właściwego.

Zobacz też

• Przykłady — snippet wideo i inne gotowce
• YouTube power-user — więcej reguł pod YouTube
• Akcja SLIDER — suwak jako kontrolka

Zainstaluj JustZix — i oglądaj w swoim tempie, nie w tempie odtwarzacza.