Javascript onkeydown听标签视频

Question

我想在视频标签中触发onkeydown事件但是我看到这没有给我任何结果我希望我明白并且可以帮助我...问候。

document.querySelector("video").onkeydown = function (e){  
  switch(e.keyCode){
     case 65:
     console.log('code 65')
    break;  
  } 
}

这是我的代码。

Answer 1

问题是因为这条线console.log('code 65') break;。它会抛出意想不到的语法。

在这个演示中，使用tab键选择/聚焦视频元素。一旦选中它，然后才能触发keydown事件

document.querySelector("video").onkeydown = function(e) {

  switch (e.keyCode) {
    case 65:
      console.log('code 65'); //Changed here
      break;c//Changed here
  }
}

<video width="320" height="240" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

Answer 2

如果我原谅，你必须通过没有'; '但是Cuestien就是以下那个你必须在视频中使用鼠标的焦点，并且你应该在那里触发onkeydown的动作。

Answer 3

如果您希望键盘事件在鼠标单击<video>元素后响应，则需要显式设置输入焦点，以便现有逻辑可以处理keydown事件。

document.getElementById("play-video").onmousedown = function (e){ 
    console.log("focus now on video")
    document.getElementById("play-video").focus()
}

但是，请注意视觉上<video>元素将突出显示以指示选择，如果用户按Tab键，则焦点将循环通过<video>元素的可选部分。

一个可能的解决方案是将keydown作为一个整体引入document，因此您不必担心实际用户将重点放在我们获取事件的位置（尽管如果您在页面上有其他输入字段，则可能会添加其他并发症）