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中，因此您不必擔心實際用戶將我們集中在哪里以獲取事件（盡管如果頁面上還有其他輸入字段，則可能會增加其他並發症）