← Все статьи

Туториалы

Управляйте скоростью воспроизведения видео на любом сайте

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

Большинство видеоплееров ограничивают скорость на 2x или вовсе прячут управление. У браузера такого ограничения нет. Короткое правило JustZix даёт вам точное управление скоростью на каждом видео на странице, кто бы ни построил плеер.

Почему правило лучше интерфейса плеера

Нативный HTMLMediaElement выставляет свойство playbackRate. Оформление плеера — это просто оболочка поверх него. Когда вы задаёте playbackRate напрямую, вы обходите оболочку и говорите с элементом. JustZix позволяет привязать этот код к шаблону URL, чтобы он запускался автоматически каждый раз, когда вы открываете подходящую страницу.

Минимальный рецепт

Создайте JavaScript-правило, привязанное к сайтам, где вы смотрите длинные видео. Этот сниппет задаёт каждому видео 1,5x и безопасен для повторного запуска:

document.querySelectorAll('video').forEach(function (v) {
  v.playbackRate = 1.5;
});

Это работает для видео, уже находящихся в DOM. Многие сайты загружают плеер после страницы, так что вы также захотите поймать видео, появляющиеся позже.

Ловля видео, добавленных позже

MutationObserver следит за документом и применяет вашу скорость к любому новому видео. Он защитный: он никогда не выбрасывает ошибку, если узел не является элементом.

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

Одна тонкость: некоторые плееры сбрасывают playbackRate, когда начинается новый клип. Чтобы это пережить, также слушайте события ratechange и loadeddata и заново применяйте своё значение.

document.addEventListener('loadeddata', function (e) {
  var v = e.target;
  if (v && v.tagName === 'VIDEO') { v.playbackRate = 1.5; }
}, true);

Третий аргумент true включает захват, так что обработчик срабатывает, хотя медиа-события не всплывают.

Сочетания клавиш и значок скорости

Смотреть туториалы легче, когда можно подправить скорость, не выискивая меню. Это правило привязывает клавиши квадратных скобок для шага скорости и показывает небольшой значок в углу.

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

Значок использует самый высокий практичный z-index, чтобы оставаться видимым поверх полноэкранных плееров, и игнорирует нажатия клавиш, пока вы набираете в поле формы.

Привязка правила

• Сопоставляйте широкие шаблоны вроде *://*.example.com/* для одного сайта или подстановку для целого класса страниц.
• Держите по одному правилу на сайт, чтобы дать каждому свою скорость по умолчанию.
• Отключайте правило из всплывающего окна, если плеер ведёт себя плохо, вместо удаления.

Просмотрите наши готовые примеры ради готовой к копированию версии этого правила или скачайте JustZix, чтобы начать. Когда со скоростью покончено, следующий шаг — вернуть кнопку «картинка в картинке» — смотрите добавление кнопки «картинка в картинке» к любому видео.