← 全部文章

教程

为每个视频强制使用原生控件

17 5月 2026 · 作者 JustZix Team

自定义视频播放器看起来很时髦,直到它们坏掉:缺少进度条、没有音量滑块、一个无视点击的播放按钮。浏览器免费附带一个可靠的控制栏。一条 JustZix 规则把它强制到每个视频上,让你总是有可用的控件。

唯一重要的那个属性

每个 <video> 元素都有一个布尔型 controls 属性。当它为 true 时,浏览器绘制它自己的控制栏。网站禁用它,好让它们的自定义 UI 接管。把它重新打开:

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 隐藏损坏的自定义 UI

一旦原生栏可见,网站的自定义遮罩常常坐在它上面并偷走点击。一条小的 CSS 规则可以把它推开。自定义控件通常带有可预测的类或数据属性;检查页面一次并定位它。

.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。要在速度上更进一步,请阅读在任何网站上控制视频播放速度。