按住空格键控制YouTube播放速度异常：触发16倍速而非预期4倍速

你的代码出现16倍速的问题，核心是存在几个关键错误，同时可能因浏览器行为或代码笔误放大了问题：

代码中的错误点 #

1. 未定义的getCurrentPlaybackRate()函数
   代码调用了这个函数但没有实现，运行时会抛出错误，导致currentSpeed为undefined，进而video.dataset.originalSpeed被设为undefined。在keyup事件中，parseFloat(undefined)得到NaN，于是使用默认值2.0恢复速度，完全无法正确还原用户原本的播放速度。

2. 不必要的清空dataset.originalSpeed
   在keyup时清空这个值，会导致如果用户后续调整了播放速度再按住空格，代码会错误地将当前的临时速度（比如4倍速）当作原速度保存，无法恢复到新的原速度。

3. 未阻止空格键默认行为
   YouTube默认将空格键作为暂停/播放快捷键，按住空格时会同时触发暂停和调速，不仅影响体验，还可能导致代码逻辑在异常状态下运行。

为什么会出现16倍速？ #

最可能的场景是：

• 如果你误将代码中的video.playbackRate = 4.0写成了video.playbackRate *= 4，那么第一次按住空格时，原速度如果是4倍，就会变成16倍；
• 或者因getCurrentPlaybackRate()报错，导致video.dataset.originalSpeed未被正确设置，keyup时恢复到默认的2.0，而浏览器重复触发keydown事件（按住键时的默认重复行为）且isSpacebarHeld状态未正确生效，导致多次执行调速逻辑，最终叠加出16倍速。

修复后的代码 #

let isSpacebarHeld = false;

document.addEventListener('keydown', (event) => {
    if (event.code === 'Space' && !isSpacebarHeld) {
        event.preventDefault(); // 阻止YouTube默认的暂停/播放行为
        isSpacebarHeld = true;
        const video = document.querySelector('video');
        if (video) {
            // 直接获取当前播放速度，无需自定义函数
            const currentSpeed = video.playbackRate;
            // 仅在未保存原速度时才保存
            if (!video.dataset.originalSpeed) {
                video.dataset.originalSpeed = currentSpeed.toString();
            }
            video.playbackRate = 4.0;
        }
    }
});

document.addEventListener('keyup', (event) => {
    if (event.code === 'Space') {
        event.preventDefault();
        isSpacebarHeld = false;
        const video = document.querySelector('video');
        if (video && video.dataset.originalSpeed) {
            const originalSpeed = parseFloat(video.dataset.originalSpeed);
            video.playbackRate = originalSpeed;
        }
    }
});

// 监听用户手动调整播放速度的操作，清空保存的原速度，确保下次按住空格时保存最新值
document.addEventListener('change', (event) => {
    if (event.target.closest('.ytp-speed-menu')) {
        const video = document.querySelector('video');
        if (video) {
            video.dataset.originalSpeed = '';
        }
    }
});

修复说明 #

• 移除了未定义的getCurrentPlaybackRate()，直接使用video.playbackRate获取当前播放速度；
• 添加event.preventDefault()阻止空格键的默认行为，避免和YouTube自带快捷键冲突；
• 优化了原速度的保存逻辑：仅在首次按住空格时保存原速度，当用户手动调整播放速度时自动清空保存的值，确保下次按住空格时能保存最新的原速度；
• 增加了判断，仅在存在有效原速度时才执行恢复操作，避免使用错误的默认值。

内容的提问来源于stack exchange，提问作者Kushagra Dwivedi