Chrome 和 Opera 上的 JavaScript 键挂钩问题

Question

我正在使用 HTML5 和 JavaScript 做一个视频界面网络。

我在使用 JavaScript 时遇到问题，因为我需要使用按键来控制视频，因此当有人从键盘上按下某个键（例如“P”）时，视频将处于“播放”或“暂停”状态。 问题是它不能在 Chrome 和 Opera 上运行，但在 Firefox 上运行。

以下摘录是总代码的一部分：

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 - 我在 Chrome 和 Opera 上遇到问题的函数：

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 元素之类的可聚焦元素才可以。要使常规 <div> 能够触发键事件，请为其分配 tabIndex（值为零表示该元素处于常规 Tab 键顺序）：

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