更改播放速度的 Javascript 快捷方式无法正常工作答案

【问题标题】：Javascript shortcut to change playback speed not working properly更改播放速度的 Javascript 快捷方式无法正常工作
【发布时间】：2021-12-30 06:47:22
【问题描述】：

我有一个超级简单的视频播放速度扩展。当 Shift + MouseWheelUp 完成时，播放速度应该增加 0.25，当 Shift + MouseWheelDown 完成时，它应该减少 0.25。

当我测试它（在 YouTube 或任何其他带有 HTML 视频标签的视频网站上）时，我遇到了以下问题：

每次我执行这些事件时，播放速度都不会增加 0.25。相反，速度会随机增加/减少 0.25 以上。
特别是在 Odysee.com 上，我得到“无法读取 null 属性（读取 'playbackRate'）”，即使我在页面加载了视频元素时按了 shift。

我把代码放在下面。随意复制所有内容并进行测试。

为什么会出现这些问题，我该如何解决？

清单：

{
    "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/*"
            ],
            "js": [
                "playspeed.js"
            ],
            "run_at": "document_end"
        }
    ]
}

playspeed.js

vid = document.querySelector('video');

document.addEventListener('keydown', changeSpeed);

function changeSpeed(ke) {
    if (ke.shiftKey) {
        document.addEventListener('wheel', function (se) {
            if (se.deltaY < 0) {
                increaseSpeed();
            } else if (se.deltaY > 0) {
                decreaseSpeed();
            }
        })
    }
}

function decreaseSpeed() {
    vid.playbackRate -= 0.25;
}

function increaseSpeed() {
    vid.playbackRate += 0.25;
}

【问题讨论】：

标签： javascript google-chrome-extension dom-events html5-video firefox-addon

【解决方案1】：

每次按下 shiftKey 时，您都会添加一个新的滚轮侦听器，因此所有这些过去的侦听器将永远运行，并在滚轮滚动时触发并将其更改应用于速率。

解决方案是删除keydown 并使用一个全局wheel 侦听器来检查shiftKey：

document.addEventListener('wheel', e => {
  if (e.shiftKey) {
    vid.playbackRate -= Math.sign(e.deltaY) * .25;
  }
});

【讨论】：