Javascript 如何覆盖默认浏览器HTML5视频控件？

我正在尝试将视频播放器的自定义快捷方式更改为Youtube的快捷方式。在Youtube上，箭头键分别倒带和快进5秒。默认情况下，在Firefox和Google上，当按下左箭头键时，视频将回放15秒，当按下右箭头键时，视频将快进15秒。我想把时间定为5秒。我尝试过使用e.preventDefault（）但没有效果。我对空格键也有同样的问题

关于如何实现这一点有什么想法吗

当前代码：

window.addEventListener('keydown', function (event) {
if (event.key === "ArrowLeft") {
        event.preventDefault();
        video.currentTime -= 5;
} else if (event.key === "ArrowRight") {
        event.preventDefault();
        video.currentTime += 5;
        }
});

---

谢谢

首先，您应该检查HTML文档中是否禁用了视频元素上的控件

<video *controls* width="250">  Remove *controls*

Remove*控件*

如果该功能已禁用，但仍然无法为您工作，您可以尝试使用JQuery解决此问题，方法是：

<video id="video" type="video/mp4" src="./video.mp4" autoplay></video>

var vid = document.getElementById("video");

$(window).keydown(function(e) {
  if (e.which == 32) {
    e.preventDefault();
    if (video.paused) {
      playVideo();
    }else {
      pauseVideo();
    }
  }else if(e.which == 39){
    skipForward();
  }else if(e.which == 37){
    skipBackward();
  }
});

function skipForward() {
  vid.currentTime += 10.0;

  $("#skip_forward_visual").removeClass("v_hidden");  // Visual Indicator

  setTimeout(function() {
    $("#skip_forward_visual").addClass("v_hidden");
  }, 400);
}

function skipBackward(){
  vid.currentTime -= 10.0;

  $("#skip_backward_visual").removeClass("v_hidden"); // Visual Indicator

  setTimeout(function() {
    $("#skip_backward_visual").addClass("v_hidden");
  }, 400);
}

var vid=document.getElementById（“视频”）；
$（窗口）.keydown（函数（e）{
如果（e.which==32）{
e、 预防默认值（）；
如果（视频暂停）{
播放视频（）；
}否则{
pauseVideo（）；
}
}否则如果（e.which==39）{
skipForward（）；
}否则如果（e.which==37）{
skipBackward（）；
}
});
函数skipForward（）{
vid.currentTime+=10.0；
$（“#向前跳过#视觉”）.removeClass（“v#u hidden”）//视觉指示器
setTimeout（函数（）{
$（“#向前跳过#可视化”）.addClass（“v#u隐藏”）；
}, 400);
}
函数skipBackward（）{
vid.currentTime-=10.0；
$（“向后跳过视觉”）.removeClass（“隐藏”）//视觉指示器
setTimeout（函数（）{
$（“#向后跳过#可视化”）.addClass（“v#u隐藏”）；
}, 400);
}

希望这有帮助。它将覆盖左右键，并根据给定的数字搜索视频

<script>
var video = document.querySelector('video'); //video element
window.addEventListener('keydown', function (event) {
if (event.keyCode  === 37) { 
        //Left
        video.currentTime -= 10;
} else if (event.keyCode === 39) { 
        //Right
        video.currentTime += 10;
        }
});
</script>

var video=document.querySelector（'video'）//视频元素
window.addEventListener（'keydown'，函数（事件）{
如果（event.keyCode==37）{
//左
video.currentTime-=10；
}如果（event.keyCode==39）{
//对
video.currentTime+=10；
}
});

从OP代码中提供的内容来看，它应该可以工作。唯一的办法是

视频
为空
event.key
可能应该是
event.code
。当然，
event.preventDefault（）
既没有帮助也没有阻碍…或者如果箭头键的默认行为受到某种干扰，它实际上会有所帮助…但实际上，它看不出在您的情况下是如何的


演示

window.onkeydown=vidCtrl；
函数vidCtrl（e）{
const vid=document.querySelector（“视频”）；
const key=e.code；
如果（键=='ArrowLeft'）{
vid.currentTime-=5；
如果（参考当前时间<0）{
参阅暂停（）；
vid.currentTime=0；
}
}否则如果（键==='ArrowRight'）{
vid.currentTime+=5；
if（视频当前时间>视频持续时间）{
参阅暂停（）；
vid.currentTime=0；
}
}else if（键=='Space'）{
如果（参见暂停| |参见结束）{
视频播放（）；
}否则{
参阅暂停（）；
}
}
}
视频{
显示：块；
宽度：320px；
利润率：15px自动；
}
我认为zer00ne解决方案不起作用，因为它没有覆盖youtube默认的5秒向前/向后时间（至少对我来说，无论是Firefox还是Chrome）。事实上，我认为他的解决方案只是在默认的5秒基础上增加了5秒

我试图找到一个更好的解决方案，但即使使用此代码

window.onkeydown = vidCtrl;

function vidCtrl(e) {
  e.preventDefault();
  const vid = document.querySelector('video');
  const timeCurrent = vid.currentTime
  console.log(timeCurrent);
}

返回的当前时间是发生向前/向后5秒的默认行为后的时间。我真的不明白

编辑：这里的问题似乎是一样的：
要将控件从
或
中移除，是
文档。querySelector（'video'）。controls=false顺便说一句，jQuery将无法工作。你为什么要发布你还没有测试过的代码？不幸的是，这似乎不起作用。这只会对用户隐藏可见的播放器控件（播放按钮、暂停按钮、洗涤器、持续时间等），但对默认键盘快捷键没有影响。不过，谢谢你的尝试。我正在纠正虚幻的G，因为他的代码是非常错误的。我还没费心回答。我现在就发。对不起，我只是很快就发了。我已经创建了自己的播放器，下面是我的代码。对不起，我是新手，所以请容忍我。不幸的是，这似乎不起作用。它只是在默认浏览器的HTML5视频箭头快捷方式的数量上添加了该数量。您使用的是哪种浏览器？请看我的，它在Chrome和FFT中运行完美谢谢！我不知道为什么我的Chrome在添加时间时会出现不一致的问题，但是你的代码在匿名模式下工作（可能是某种扩展冲突），并且比我的代码干净得多。谢谢隐姓埋名模式？是的，这一定是一个奇怪的扩展冲突。我们会的我很乐意帮忙，快乐编码！