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

2024-03-30

我正在尝试将视频播放器的自定义快捷方式更改为 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(使用前将#替换为@)

如何覆盖默认浏览器 HTML5 视频控件? 的相关文章

随机推荐