← Alle Beiträge

Anleitungen

Native Steuerungen auf jedem Video erzwingen

17 Mai 2026 · von JustZix Team

Benutzerdefinierte Videoplayer sehen schick aus, bis sie kaputtgehen: ein fehlender Schieberegler, kein Lautstärkeregler, eine Wiedergabe-Schaltfläche, die Klicks ignoriert. Der Browser liefert kostenlos eine zuverlässige Steuerleiste aus. Eine JustZix-Regel erzwingt sie auf jedem Video, sodass Sie immer funktionierende Steuerungen haben.

Die eine Eigenschaft, die zählt

Jedes <video>-Element hat eine boolesche controls-Eigenschaft. Wenn sie wahr ist, zeichnet der Browser seine eigene Steuerleiste. Seiten deaktivieren sie, damit ihre benutzerdefinierte UI übernehmen kann. Schalten Sie sie wieder ein:

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

Das ist der Kern. Die Rezepte unten lassen es auf dynamischen Seiten haften und stoppen die Seite davon, es wieder zu entfernen.

Steuerungen auf dynamischen Playern behalten

Viele Seiten schalten controls aus, nachdem die Seite geladen hat, oder ersetzen das Video-Element ganz. Ein MutationObserver, der sowohl neue Knoten als auch Attributänderungen beobachtet, hält Ihre Einstellung an Ort und Stelle.

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

Der attributeFilter verengt den Observer auf nur das controls-Attribut, sodass er selbst auf geschäftigen Seiten günstig bleibt.

Die kaputte benutzerdefinierte UI mit CSS ausblenden

Sobald die native Leiste sichtbar ist, sitzt das benutzerdefinierte Overlay der Seite oft obendrauf und stiehlt Klicks. Eine kleine CSS-Regel kann es aus dem Weg schieben. Benutzerdefinierte Steuerungen tragen meist eine vorhersehbare Klasse oder ein Datenattribut; inspizieren Sie die Seite einmal und visieren Sie es an.

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

video {
  pointer-events: auto !important;
}

Der zweite Block aktiviert Klicks auf das Video selbst wieder, falls die Seite sie deaktiviert hat, damit ihr Overlay jede Interaktion erfassen konnte. Passen Sie die Selektoren an den Player an, mit dem Sie es zu tun haben.

Eine kombinierte Klick-zum-Beheben-Aktion

Wenn Sie nur gelegentlich native Steuerungen wollen, belegen Sie es mit einer Taste, statt es immer laufen zu lassen. Diese Regel stellt Steuerungen wieder her und beseitigt blockierende Overlays, wenn Sie ein Kürzel drücken.

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

Den z-index anzuheben hebt das Video über jedes Overlay, sodass seine eigene Steuerleiste Klicks empfängt.

Praktische Hinweise

• Native Steuerungen umfassen in den meisten Browsern Geschwindigkeit, Lautstärke, Vollbild und Bild-in-Bild, sodass eine Regel mehrere Bedürfnisse abdeckt.
• Wenn eine Seite ein Streaming-Format verwendet, das der Browser nicht durchsuchen kann, spielt und pausiert die native Leiste trotzdem zuverlässig.
• Halten Sie das JS und CSS als zwei Hälften derselben JustZix-Regel, beschränkt auf dasselbe URL-Muster.

Finden Sie eine paketierte Version in unseren fertigen Beispielen oder laden Sie JustZix herunter. Um mit der Geschwindigkeit weiterzugehen, lesen Sie die Video-Wiedergabegeschwindigkeit überall steuern.