← Tous les articles

Tutoriels

Forcez les contrôles natifs sur chaque vidéo

17 mai 2026 · par JustZix Team

Les lecteurs vidéo personnalisés ont l'air élégants jusqu'à ce qu'ils cassent : une barre de progression manquante, pas de curseur de volume, un bouton lecture qui ignore les clics. Le navigateur livre une barre de contrôle fiable gratuitement. Une règle JustZix la force sur chaque vidéo pour que vous ayez toujours des contrôles fonctionnels.

La seule propriété qui compte

Chaque élément <video> a une propriété booléenne controls. Quand elle est vraie, le navigateur dessine sa propre barre de contrôle. Les sites la désactivent pour que leur interface personnalisée puisse prendre le relais. Réactivez-la :

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

C'est le cœur. Les recettes ci-dessous la font tenir sur les pages dynamiques et empêchent le site de la retirer à nouveau.

Garder les contrôles sur les lecteurs dynamiques

Beaucoup de sites désactivent controls après le chargement de la page, ou remplacent entièrement l'élément vidéo. Un MutationObserver qui surveille à la fois les nouveaux nœuds et les changements d'attributs garde votre réglage en place.

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

Le attributeFilter restreint l'observateur au seul attribut controls, donc il reste peu coûteux même sur les pages chargées.

Masquer l'interface personnalisée cassée avec le CSS

Une fois la barre native visible, la superposition personnalisée du site se pose souvent par-dessus et vole les clics. Une petite règle CSS peut l'écarter. Les contrôles personnalisés portent généralement une classe ou un attribut data prévisible ; inspectez la page une fois et ciblez-le.

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

video {
  pointer-events: auto !important;
}

Le second bloc réactive les clics sur la vidéo elle-même, au cas où le site les aurait désactivés pour que sa superposition puisse capturer chaque interaction. Ajustez les sélecteurs pour correspondre au lecteur auquel vous avez affaire.

Une action combinée de correction au clic

Si vous ne voulez les contrôles natifs qu'occasionnellement, liez-les à une touche au lieu de l'exécuter toujours. Cette règle restaure les contrôles et efface les superpositions bloquantes quand vous appuyez sur un raccourci.

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

Élever le z-index soulève la vidéo au-dessus de toute superposition pour que sa propre barre de contrôle reçoive les clics.

Notes pratiques

• Les contrôles natifs incluent la vitesse, le volume, le plein écran et l'image dans l'image dans la plupart des navigateurs, donc une seule règle couvre plusieurs besoins.
• Si un site utilise un format de streaming que le navigateur ne peut pas parcourir, la barre native pourra toujours lire et mettre en pause de façon fiable.
• Gardez le JS et le CSS comme deux moitiés de la même règle JustZix limitée au même motif d'URL.

Trouvez une version packagée dans nos exemples prêts à l'emploi ou téléchargez JustZix. Pour aller plus loin avec la vitesse, lisez contrôler la vitesse de lecture vidéo n'importe où.