javascript - 如何监听视频标签中的keydown事件？

Question

我有一个<video>标签并希望监听其 keydown 事件。下面是代码:

html:

<div>
<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls onkeydown="key()">
  </video>
</div>

JavaScript:

function key(e) {
  console.log(e.keyCode)
}

当我播放视频并从键盘输入某个键时，它不会触发 key功能。监听视频关键事件的正确方法是什么？

我也尝试了下面的代码，但它不起作用:

document.querySelector("video").onkeydown = function(e) {
  console.log(e.keyCode)
  }

Answer 1

要调用按钮按下事件，您需要关注指定的元素。这里，由于某种原因，您无法自动聚焦于视频，因此只需在播放视频时将其破解即可，如下所示:

var video = document.getElementById('vid')

video.addEventListener('keydown', (e) => {
  console.log(e);
});

video.addEventListener('play', () => {
  video.focus();
});

jsfiddle:https://jsfiddle.net/238bygu7/

(在这种情况下，还请确保为您的视频添加 ID)