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;这行console.log('code 65') break; 。 它将抛出意外的语法。

在此演示选择使用/聚焦视频元素tab key.Once它被选中，那么也只有这样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>元素后响应，则需要显式设置输入焦点，以便现有逻辑可以处理按键事件。

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

但是，请注意， <video>元素将在视觉上突出显示以指示选择，并且如果用户按下tab，则焦点将在<video>元素的可选部分之间循环。

一种可能的解决方案是将整个document的keydown放在整个document中，因此您不必担心实际用户将我们集中在哪里以获取事件（尽管如果页面上还有其他输入字段，则可能会增加其他并发症）