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>元素不会收到关键事件。只有可聚焦的元素，如表单输入和可信任的元素。要使常规<div>能够触发键事件，请为其指定tabIndex（值为零表示该元素处于常规Tab键顺序）：

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

Chrome和Opera上的JavaScript密钥挂钩问题

1 个答案: