我正在尝试将视频播放器的自定义快捷方式更改为 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;
}
});
Thanks
从OP代码中提供的内容看来它应该可以工作。唯一不会的办法是video
一片空白。event.key
可能应该是event.code
。当然那event.preventDefault()
既没有帮助,也没有阻碍...或者事实上,如果箭头键的默认行为以某种方式干扰,它会有所帮助...但无法真正了解您的情况。
Demo
window.onkeydown = vidCtrl;
function vidCtrl(e) {
const vid = document.querySelector('video');
const key = e.code;
if (key === 'ArrowLeft') {
vid.currentTime -= 5;
if (vid.currentTime < 0) {
vid.pause();
vid.currentTime = 0;
}
} else if (key === 'ArrowRight') {
vid.currentTime += 5;
if (vid.currentTime > vid.duration) {
vid.pause();
vid.currentTime = 0;
}
} else if (key === 'Space') {
if (vid.paused || vid.ended) {
vid.play();
} else {
vid.pause();
}
}
}
video {
display: block;
width: 320px;
margin: 15px auto;
}
<video src='https://glsec.s3.amazonaws.com/mp4/60s.mp4'></video>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)