← Wszystkie wpisy

Poradniki

Wymuś natywne kontrolki na każdym wideo

17 maja 2026 · autor JustZix Team

Własne odtwarzacze wideo wyglądają elegancko, dopóki się nie zepsują: brakujący suwak, brak suwaka głośności, przycisk odtwarzania ignorujący kliknięcia. Przeglądarka dostarcza niezawodny pasek kontrolny za darmo. Reguła JustZix wymusza go na każdym filmie, byś zawsze miał działające kontrolki.

Jedna właściwość, która ma znaczenie

Każdy element <video> ma logiczną właściwość controls. Gdy jest prawdziwa, przeglądarka rysuje własny pasek kontrolny. Strony ją wyłączają, by ich własne UI mogło przejąć kontrolę. Włącz ją z powrotem:

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

To rdzeń. Przepisy poniżej sprawiają, że trzyma się to na dynamicznych stronach i powstrzymują stronę przed ponownym usunięciem tego.

Zachowaj kontrolki na dynamicznych odtwarzaczach

Wiele stron wyłącza controls po załadowaniu strony lub zastępuje element wideo całkowicie. MutationObserver, który obserwuje zarówno nowe węzły, jak i zmiany atrybutów, utrzymuje twoje ustawienie na miejscu.

(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 zawęża obserwatora tylko do atrybutu controls, więc pozostaje tani nawet na zajętych stronach.

Ukryj zepsute własne UI za pomocą CSS

Gdy natywny pasek jest widoczny, własna nakładka strony często siedzi na wierzchu i kradnie kliknięcia. Niewielka reguła CSS może odsunąć ją z drogi. Własne kontrolki zwykle noszą przewidywalną klasę lub atrybut data; zbadaj stronę raz i namierz to.

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

video {
  pointer-events: auto !important;
}

Drugi blok ponownie włącza kliknięcia na samym filmie, na wypadek gdyby strona je wyłączyła, by jej nakładka mogła przechwytywać każdą interakcję. Dostosuj selektory do odtwarzacza, z którym masz do czynienia.

Połączona akcja klik-aby-naprawić

Jeśli chcesz natywnych kontrolek tylko okazjonalnie, przypisz to do klawisza zamiast uruchamiać zawsze. Ta reguła przywraca kontrolki i usuwa blokujące nakładki, gdy naciśniesz skrót.

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

Podniesienie z-index unosi film nad każdą nakładkę, by jego własny pasek kontrolny odbierał kliknięcia.

Praktyczne uwagi

• Natywne kontrolki w większości przeglądarek zawierają prędkość, głośność, tryb pełnoekranowy i obraz w obrazie, więc jedna reguła obejmuje kilka potrzeb.
• Jeśli strona używa formatu strumieniowego, którego przeglądarka nie potrafi przewijać, natywny pasek nadal będzie niezawodnie odtwarzać i wstrzymywać.
• Trzymaj JS i CSS jako dwie połowy tej samej reguły JustZix ograniczonej do tego samego wzorca URL.

Znajdź spakowaną wersję w naszych gotowych przykładach lub pobierz JustZix. Aby pójść dalej z prędkością, przeczytaj steruj prędkością odtwarzania wideo na dowolnej stronie.