← Все статьи

Туториалы

Управление скоростью HTML5-видео — за пределами 2x, с горячими клавишами

15 мая 2026 · автор JustZix Team

Встроенный видеоплеер даёт тебе до 2x скорости и не больше. Иногда ты хочешь лекцию на 2,75x или запись с веб-камеры на 0,5x. Правило JustZix добавляет управление скоростью с клавиатуры к каждому HTML5-плееру — YouTube, Vimeo, онлайн-курсы, что угодно.

Почему 2x — не предел

У элемента <video> есть свойство playbackRate, и у него нет верхнего предела со стороны HTML — это UI плеера искусственно ограничивает ползунок до 2x. Устанавливая playbackRate из кода, ты полностью обходишь этот ползунок.

Правило

URL-паттерн: видеосайт (например, *://*.youtube.com/*) или * глобально. JavaScript правила:

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

Клавиши: D ускоряет на 0,25x, S замедляет, R возвращает к 1x.

Как это работает

• Защита от input/textarea. Первая строка отбрасывает события, пока ты печатаешь в текстовом поле — без неё «d» в комментарии меняла бы скорость.
• querySelector('video'). Берём первый видеоэлемент. На страницах с одним плеером этого достаточно.
• Шаг 0,25x. Маленький, чтобы ты точно попадал в комфортный темп.

Расширения — перемотка и Picture-in-Picture

Легко добавить перемотку стрелками и picture-in-picture:

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

Вариант со слайдером — действие SLIDER

Предпочитаешь слайдер клавишам? Создай действие SLIDER на панели действий JustZix — перетаскиваешь его, и код действия устанавливает document.querySelector('video').playbackRate на значение слайдера. Скорость под большим пальцем, никаких клавиш для запоминания.

Ловушки

• Очень высокая скорость теряет звук. Свыше примерно 4x браузер часто отключает звук — это ограничение движка, не баг правила.
• SPA и смена видео. На YouTube следующее видео — это тот же элемент <video> — querySelector внутри обработчика читает текущее состояние, поэтому работает после перехода к следующему клипу.
• Реклама — тоже видео. Иногда querySelector('video') попадает в плеер рекламы. Как только реклама закончится, ты вернёшься к настоящему.

Смотри также

• Примеры — видео-сниппет и другой готовый код
• YouTube power-user — другие правила для YouTube
• Действие SLIDER — слайдер как контрол

Установи JustZix — и смотри в своём темпе, не в темпе плеера.