自定义视频播放器按键控制异常：keydown触发前video.currentTime已变更

你遇到的核心问题是：浏览器内置的video元素键盘快捷键（左右键跳转）是在事件捕获阶段执行的，而你绑定的keydown事件默认是在冒泡阶段触发，导致默认跳转行为先完成，你的自定义逻辑才执行，最终出现跳转幅度叠加的问题。

解决方案 #

1. 在事件捕获阶段监听并阻止默认行为 #

将addEventListener的第三个参数设为true，这样你的事件处理函数会在捕获阶段触发，优先于浏览器的默认行为执行，从而可以提前阻止默认跳转：

const video = document.querySelector('video');
// 启用捕获阶段监听
video.addEventListener('keydown', e => {
    e.preventDefault(); // 此时默认行为尚未执行，阻止有效
    switch (e.key) {
        case 'ArrowRight':
            video.currentTime += 5;
            break;
        case 'ArrowLeft':
            video.currentTime -= 5;
            break;
    }
}, true);

2. 确保video元素可获得焦点 #

默认情况下部分浏览器的video元素无法获得焦点，键盘事件可能不会直接触发在video上。给video添加tabindex属性，让它可以被聚焦：

<div id="player-section">
    <video width="100%" height="auto" tabindex="0">
        <source src="/video/videofile.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="details">
        <!-- Some metadata -->
    </div>
</div>

补充说明 #

• 浏览器对video的默认左右键跳转幅度通常是10秒，所以你会看到按下一次键，视频实际跳了15秒（默认10+自定义5）或者后退5秒（默认10-自定义5），这就是行为叠加导致的。
• seeking或seeked事件属于视频播放状态事件，无法阻止键盘触发的默认跳转行为，因为这些事件是在跳转开始/结束后才触发的。

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