← 全部文章

教程

HTML5 视频速度控制 —— 超过 2x，带键盘快捷键

15 5月 2026 · 作者 JustZix Team

内置视频播放器只给你最高 2x 的速度，仅此而已。有时你想要一节 2.75x 的讲座，或者一段 0.5x 的网络摄像头录像。一条 JustZix 规则给每个 HTML5 播放器加上键盘速度控制 —— YouTube、Vimeo、在线课程，什么都行。

为什么 2x 不是极限

<video> 元素有一个 playbackRate 属性，从 HTML 一侧没有上限 —— 是播放器的 UI 人为地把滑块限制在 2x。从代码里设置 playbackRate，你就完全绕过了那个滑块。

规则

URL 模式：一个视频网站（例如 *://*.youtube.com/*）或全局 *。规则的 JavaScript：

document.addEventListener('keydown', (e) => {
  if (/input|textarea/i.test(e.target.tagName)) return;
  const v = document.querySelector('video');
  if (!v) return;
  if (e.key === 'd') v.playbackRate += 0.25;
  if (e.key === 's') v.playbackRate = Math.max(0.25, v.playbackRate - 0.25);
  if (e.key === 'r') v.playbackRate = 1;
});

按键：D 加速 0.25x，S 减速，R 恢复到 1x。

它如何工作

• 对 input/textarea 的守卫。第一行在你正于文本字段里打字时丢弃事件 —— 没有它，评论里的一个「d」就会改变速度。
• querySelector('video')。我们取第一个 video 元素。在只有一个播放器的页面上这就够了。
• 0.25x 的步长。很小，这样你能精确命中一个舒适的节奏。

扩展 —— 跳转与画中画

很容易加上方向键跳转和画中画：

if (e.key === 'ArrowRight') v.currentTime += 10;
if (e.key === 'ArrowLeft')  v.currentTime -= 10;
if (e.key === 'p') {
  document.pictureInPictureElement
    ? document.exitPictureInPicture()
    : v.requestPictureInPicture();
}

一个带滑块的变体 —— SLIDER 动作

比起按键你更喜欢滑块？在 JustZix 动作栏里创建一个 SLIDER 动作 —— 你拖动它，动作代码把 document.querySelector('video').playbackRate 设为滑块的值。速度在你拇指下，没有按键要记。

坑

• 很高的速度会丢失音频。超过约 4x 浏览器经常会静音 —— 这是引擎的限制，不是规则的 bug。
• SPA 和视频切换。在 YouTube 上，下一个视频是同一个 <video> 元素 —— 处理器里的 querySelector 读取当前状态，所以它在切到下一个片段后仍然有效。
• 广告也是视频。有时 querySelector('video') 命中的是广告播放器。广告一结束，你就回到真正的那个。

另见

• 示例 —— 视频代码片段和其他开箱即用的代码
• YouTube 高级用户 —— 更多 YouTube 规则
• SLIDER 动作 —— 用滑块作为控件

安装 JustZix —— 按你的节奏看，而不是播放器的节奏。