Question

我有一个<video>标签，并且想听它的按键事件。下面是代码：

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）

Answer 2

var video = document.getElementsByTagName('video')[0]
video.addEventListener('keypress', function (e) {
  console.log(e)
})
video.addEventListener('playing', function (e) {
  video.focus()
})

<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>

仅当DOM元素为焦点时才捕获关键事件。

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

2 个答案: