Chrome 및 Opera에서 JavaScript 키 후킹 문제가 발생했습니다.

Question

HTML5 및 JavaScript를 사용하여 비디오 인터페이스 웹을 만들고 있습니다.

키를 사용하여 비디오를 제어해야하므로 JavaScript에서 문제가 발생합니다. 예를 들어 'P'와 같이 키보드에서 키를 누르면 비디오가 '재생'또는 '일시 중지'상태가됩니다. 문제는 크롬과 오페라에서는 작동하지 않지만 파이어 폭스에서는 작동한다는 것입니다.

발췌 아래의 전체 코드의 일부입니다 :

html로 :

<video width="775" id="player" preload controls timeupdate="timeupdate()" onclick="repro()" onMouseOver="mostrarControles()" onMouseOut="ocultarControles()"> 
    <source src="video.mp4" type="video/mp4" /> 
    <source src="video.theora.ogv" type="video/ogg" /> 
    <source src="video.webmvp8.webm" type="video/webm" /> 
    TU NAVEGADOR NO SOPORTA VIDEO EN HTML5. 
</video> 
<div id="controls" onMouseOut="ocultarControles()" onMouseOver="mostrarControles()" > 
    <!-- Buttons of control--> 
</div> 

Java.JS - 내가 크롬과 오페라에 문제가 기능 :

document.getElementById("controls").addEventListener('keydown',function(event) { 
    controlTeclado(event); 
    //alert("OK"); 
}, true); 

내가 가진를 Chrome과 Opera가 .addEventListener() 내부에서 액세스하지 못하는 것을 감지했는데 이유가 무엇인지 모르겠습니다.

ProgressBar.JS:

function controlTeclado(evento) { 
    mostrarControles(); // show controls on the web page 
    if (evento.keyCode==80) { 
     alert(" Key: "+evento.keyCode); 
     repro(); //play video 
    } 
} 

Answer 1

<div> 요소는 기본적으로 키 이벤트를 수신하지 않습니다. 양식 입력 및 contenteditable 요소와 같은 focusable 요소 만 않습니다. 확인하려면 정기적으로 그것을 할당 키 이벤트를 해고 할 수 <div>tabIndex (0의 값이 요소는 일반 탭 순서에 있음을 의미) :

<div id="controls" tabindex="0" 
     onMouseOut="ocultarControles()" onMouseOver="mostrarControles()"> 
    ... 
</div>