如何覆盖默认的浏览器HTML5视频控件? [英] How can you override default browser HTML5 video controls?

问题描述

我正在尝试将视频播放器的自定义快捷方式更改为Youtube的自定义快捷方式.在YouTube上，箭头键后退并快进5秒.在Firefox和Google上，默认情况下，当按左箭头键时，视频倒退15秒，当按右箭头键时，视频快进15秒.我想把时间定为5秒.我尝试使用e.preventDefault()无济于事.我在空格键上有同样的问题.

I'm trying to change the custom shortcuts of a video player to those of Youtube. On Youtube the arrow keys rewind and fast forward 5 seconds each. By default on Firefox and Google, when the left arrow key is pressed the video is rewound by 15 seconds, when the right arrow key is pressed the video is fast forwarded by 15 seconds. I'd like to get it to be 5 seconds. I've tried using e.preventDefault() to no avail. I have the same issue with the space bar.

关于如何实现这一目标的任何想法?

Any ideas on how to make this happen?

当前代码:

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

谢谢

推荐答案

从OP代码中提供的内容来看，它应该可以工作.唯一不会的方法是video为null. event.key应该应该是event.code.当然，event.preventDefault()既无济于事，也无碍...或者它确实有助于事实，如果箭头键的默认行为以某种方式干扰了……虽然看不到您的情况.

From what is provided in OP code it looks like it should work. The only way it wouldn't is that video is null. event.key should probably be event.code. Of course that event.preventDefault() doesn't help nor hinder...or it helps in the fact if the arrow keys default behavior interfered somehow...can't really see how in your situation though.

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>

这篇关于如何覆盖默认的浏览器HTML5视频控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！