自定义HTML5视频播放速度控制扩展故障排查及修复方案咨询

嘿，我来帮你拆解这两个问题，咱们一个个来捋清楚：

问题1：播放速度随机大幅变化的成因与修复 #

成因 #

你看这段代码逻辑：每次按下Shift键触发keydown事件时，都会给document绑定一个新的wheel事件监听器。也就是说，你按Shift一次，就多一个滚轮监听；按个三五次后，滚轮滚动一下就会触发三五次increaseSpeed/decreaseSpeed，每次都±0.25，叠加起来就变成了±0.75、±1.25这种远大于预期的数值，看起来像是“随机变化”，其实是重复绑定导致的多次执行。

修复方案 #

完全不需要在keydown里绑定wheel事件——直接给document绑定一次wheel事件，在回调里判断当前是否按住了Shift键就行。这样每次滚轮滚动只会触发一次判断，不会出现重复绑定的问题。

问题2：Odysee.com抛出Cannot read properties of null的成因与修复 #

成因 #

1. 视频元素加载时机问题：Odysee的视频元素不是页面初始化就存在的，可能是用户点击播放后才动态生成，或者用了懒加载机制。而你的vid = document.querySelector('video')是在content script执行时（document_end）就执行了，这时候页面里还没有<video>标签，所以vid是null，调用vid.playbackRate自然会报错。
2. 静态查询的局限性：提前缓存的vid变量无法捕捉到后续动态生成的视频元素，一旦页面视频更新，变量就会失效。

修复方案 #

不要一开始就缓存vid变量，而是在每次需要调整速度的时候实时获取当前页面的视频元素；同时加个非空判断，确保获取到视频元素后再操作，避免null报错。如果要兼容更复杂的动态渲染场景，还可以用MutationObserver监听页面中视频元素的出现。

修复后的完整代码 #

manifest.json（可按需扩展支持的网站） #

{
  "manifest_version": 2,
  "name": "Playback Speed Controller",
  "version": "1.0",
  "description": "Change playback speed using Shift + Scroll Up/Down.",
  "icons": {
    "48": "icons/playback-speed-controller-48.png"
  },
  "content_scripts": [
    {
      "matches": [
        "https://odysee.com/*",
        "http://odysee.com/*",
        "https://www.youtube.com/*",
        "<all_urls>"
      ],
      "js": [
        "playspeed.js"
      ],
      "run_at": "document_end"
    }
  ]
}

playspeed.js（核心修复代码） #

// 实时获取当前页面的视频元素，优先取正在播放的
function getCurrentVideo() {
  return document.querySelector('video[playing], video') || null;
}

function decreaseSpeed() {
  const vid = getCurrentVideo();
  if (vid) {
    // 限制最低速度，避免变成负数
    vid.playbackRate = Math.max(0.25, vid.playbackRate - 0.25);
  }
}

function increaseSpeed() {
  const vid = getCurrentVideo();
  if (vid) {
    // 限制最高速度，避免过高导致播放异常
    vid.playbackRate = Math.min(10, vid.playbackRate + 0.25);
  }
}

// 只绑定一次wheel事件，在回调里判断Shift键
document.addEventListener('wheel', function(se) {
  // 阻止默认滚动行为，避免按住Shift滚轮时页面同时滚动
  se.preventDefault();
  if (se.shiftKey) {
    se.deltaY < 0 ? increaseSpeed() : decreaseSpeed();
  }
}, { passive: false }); // passive设为false才能调用preventDefault

额外优化说明 #

• 增加了速度范围限制（最低0.25，最高10），避免速度异常导致视频无法播放；
• 调用se.preventDefault()优化体验，按住Shift滚轮时不会同时滚动页面；
• getCurrentVideo优先获取正在播放的视频，适配多视频页面场景。

内容的提问来源于stack exchange，提问作者James Grey