← Все статьи

Туториалы

Принудите нативное управление на каждом видео

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

Пользовательские видеоплееры выглядят стильно, пока не сломаются: пропавший ползунок перемотки, нет регулятора громкости, кнопка воспроизведения, игнорирующая клики. Браузер бесплатно поставляет надёжную панель управления. Правило JustZix принуждает её на каждое видео, так что у вас всегда есть работающее управление.

Одно свойство, которое имеет значение

У каждого элемента <video> есть булево свойство controls. Когда оно истинно, браузер рисует свою панель управления. Сайты отключают его, чтобы их пользовательский интерфейс мог взять верх. Включите его обратно:

document.querySelectorAll('video').forEach(function (v) {
  v.controls = true;
});

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

Сохраняйте управление на динамических плеерах

Многие сайты выключают controls после загрузки страницы или вовсе заменяют видеоэлемент. MutationObserver, который следит и за новыми узлами, и за изменениями атрибутов, удерживает вашу настройку на месте.

(function () {
  function force(v) {
    if (v.controls !== true) { v.controls = true; }
  }
  function scan(root) {
    if (root.tagName === 'VIDEO') { force(root); }
    if (root.querySelectorAll) {
      root.querySelectorAll('video').forEach(force);
    }
  }
  scan(document.documentElement);
  new MutationObserver(function (records) {
    records.forEach(function (rec) {
      if (rec.type === 'attributes' && rec.target.tagName === 'VIDEO') {
        force(rec.target);
      }
      rec.addedNodes.forEach(function (n) {
        if (n.nodeType === 1) { scan(n); }
      });
    });
  }).observe(document.documentElement, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['controls']
  });
})();

attributeFilter сужает наблюдателя только до атрибута controls, так что он остаётся дешёвым даже на загруженных страницах.

Скройте сломанный пользовательский интерфейс через CSS

Когда нативная панель видна, пользовательский оверлей сайта часто сидит сверху и крадёт клики. Небольшое CSS-правило может убрать его с дороги. Пользовательское управление обычно несёт предсказуемый класс или data-атрибут; осмотрите страницу один раз и нацельтесь на него.

.video-player .custom-controls,
[data-player-ui],
.vjs-control-bar {
  display: none !important;
}

video {
  pointer-events: auto !important;
}

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

Объединённое действие «починить кликом»

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

document.addEventListener('keydown', function (e) {
  if (e.altKey && e.key.toLowerCase() === 'c') {
    document.querySelectorAll('video').forEach(function (v) {
      v.controls = true;
      v.style.pointerEvents = 'auto';
      v.style.zIndex = '2147483647';
      v.style.position = 'relative';
    });
  }
}, true);

Поднятие z-index возносит видео над любым оверлеем, так что его собственная панель управления получает клики.

Практические заметки

• Нативное управление включает скорость, громкость, полный экран и «картинку в картинке» в большинстве браузеров, так что одно правило покрывает несколько потребностей.
• Если сайт использует потоковый формат, который браузер не может перематывать, нативная панель всё равно надёжно воспроизводит и ставит на паузу.
• Держите JS и CSS как две половины одного правила JustZix, привязанного к одному шаблону URL.

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