← 全部文章

教程

在任何网站上控制视频播放速度

大多数视频播放器把速度封顶在 2 倍,或者干脆隐藏控件。浏览器没有那个限制。一条简短的 JustZix 规则让你对页面上的每个视频都有精细的速度控制,无论是谁做的播放器。

为什么规则胜过播放器 UI

原生的 HTMLMediaElement 暴露一个 playbackRate 属性。播放器外壳只是它之上的一层皮肤。当你直接设置 playbackRate,你就绕过皮肤,与元素对话。JustZix 让你把那段代码附加到一个 URL 模式上,这样每次你打开一个匹配的页面它都会自动运行。

最小配方

新建一条 JavaScript 规则,限定到你观看长视频的网站。这段代码把每个视频设为 1.5 倍,并且多次运行也安全:

document.querySelectorAll('video').forEach(function (v) {
  v.playbackRate = 1.5;
});

这对已经在 DOM 里的视频有效。许多网站在页面之后才加载播放器,所以你也想捕获稍后出现的视频。

捕获稍后添加的视频

一个 MutationObserver 监视文档,并把你的速度应用到任何新视频上。它是防御性的:如果某个节点不是元素,它绝不抛出错误。

(function () {
  var target = 1.5;
  function apply(root) {
    var list = root.querySelectorAll ? root.querySelectorAll('video') : [];
    list.forEach(function (v) { v.playbackRate = target; });
  }
  apply(document);
  var obs = new MutationObserver(function (records) {
    records.forEach(function (rec) {
      rec.addedNodes.forEach(function (n) {
        if (n.nodeType === 1) {
          if (n.tagName === 'VIDEO') { n.playbackRate = target; }
          else { apply(n); }
        }
      });
    });
  });
  obs.observe(document.documentElement, { childList: true, subtree: true });
})();

一个细微之处:有些播放器在新片段开始时会重置 playbackRate。为了挺过这一点,也监听 ratechangeloadeddata 事件并重新应用你的值。

document.addEventListener('loadeddata', function (e) {
  var v = e.target;
  if (v && v.tagName === 'VIDEO') { v.playbackRate = 1.5; }
}, true);

第三个参数 true 启用捕获,所以即便媒体事件不冒泡,处理器仍会触发。

键盘快捷键和速度徽章

当你能不用找菜单就微调速度时,看教程会更轻松。这条规则把方括号键绑定为步进速度,并在角落显示一个小徽章。

(function () {
  var speed = 1;
  var badge = document.createElement('div');
  badge.style.cssText = 'position:fixed;top:8px;right:8px;z-index:2147483647;'
    + 'background:#000;color:#fff;font:600 13px sans-serif;'
    + 'padding:4px 8px;border-radius:6px;opacity:0;transition:opacity .3s';
  document.body.appendChild(badge);
  function setSpeed(next) {
    speed = Math.min(5, Math.max(0.25, Math.round(next * 100) / 100));
    document.querySelectorAll('video').forEach(function (v) {
      v.playbackRate = speed;
    });
    badge.textContent = speed + 'x';
    badge.style.opacity = '1';
    clearTimeout(badge._t);
    badge._t = setTimeout(function () { badge.style.opacity = '0'; }, 1200);
  }
  document.addEventListener('keydown', function (e) {
    if (e.target && /INPUT|TEXTAREA/.test(e.target.tagName)) { return; }
    if (e.key === ']') { setSpeed(speed + 0.25); }
    if (e.key === '[') { setSpeed(speed - 0.25); }
    if (e.key === '\\') { setSpeed(1); }
  });
})();

徽章使用实用上最高的 z-index,所以它在全屏播放器之上仍然可见;而且当你在表单字段中输入时它会忽略按键。

限定规则范围

浏览我们的现成示例获取这条规则的复制即用版本,或者下载 JustZix 开始。当你处理完速度,下一步是夺回画中画按钮——参见给任何视频添加画中画按钮

为这篇文章评分

暂无评分 — 成为第一个。

自己动手试试

安装 JustZix,粘贴本文中的任意代码片段。两分钟,从零到一条在你所有设备上生效的规则。

获取 JustZix

功能 · 工作原理 · 示例 · 应用场景