如何重写HTML Video Controls？自定义视频左右键5秒跳转步长

你的代码之所以没达到预期效果，反而变成原跳转幅度加5秒，核心原因是浏览器自带的视频快捷键事件未被完全阻止，同时代码存在冗余的事件阻止逻辑和未声明变量的问题。

修正后的代码 #

const vid = document.querySelector('video');

vid.addEventListener('keydown', function(event) {
    switch (event.code) {
        case 'ArrowLeft':
            event.preventDefault();
            // 确保跳转后时间不小于0
            vid.currentTime = Math.max(0, vid.currentTime - 5);
            break;
        case 'ArrowRight':
            event.preventDefault();
            // 确保跳转后时间不超过视频总时长
            vid.currentTime = Math.min(vid.duration, vid.currentTime + 5);
            break;
        default:
            // 其他按键不拦截，保留原有行为
            return;
    }
});

关键修正点 #

• 优先阻止默认行为：匹配到左右箭头按键时，第一时间调用event.preventDefault()，彻底阻断浏览器自带的按视频时长比例跳转逻辑
• 限制时间范围：用Math.max和Math.min保证播放时间不会超出视频有效范围（0到总时长）
• 避免事件覆盖：使用addEventListener绑定事件，比直接赋值onkeydown更安全，不会覆盖其他可能存在的事件监听
• 移除冗余逻辑：删掉多余的preventDefault变量和重复的阻止调用，代码更简洁清晰

原代码失效原因 #

1. 浏览器自带的视频快捷键事件优先级更高，原代码中event.preventDefault()的调用时机没能提前阻断默认行为
2. 变量vid_currentTime未用let/const声明，会成为全局变量，可能引发意外问题
3. 重复调用event.preventDefault()属于冗余逻辑，且未针对非箭头按键做放行处理

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