Проблема с перехватом ключей JavaScript в Chrome и Opera

Я делаю веб-интерфейс видео с 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
    }
}

javascript google-chrome html opera
person maceguo    schedule 31.10.2012    source источник
comment
Вы получаете сообщение об ошибке в консоли? Если да, то что он говорит?   -  person ColBeseder    schedule 31.10.2012
comment
Javascript отлично работает в хроме и опере, поэтому я отредактировал ваш заголовок.   -  person Wug    schedule 31.10.2012
comment
@ColBeseder, на консоли нет сообщения об ошибке, только ключи не берут.   -  person maceguo    schedule 31.10.2012

Ответы (1)


arrow_upward
0
arrow_downward

Элементы <div> по умолчанию не получают ключевые события. Это делают только фокусируемые элементы, такие как поля ввода формы и элементы, доступные для редактирования. Чтобы сделать обычный <div> способным запускать ключевые события, назначьте ему tabIndex (нулевое значение означает, что элемент находится в обычном порядке табуляции):

<div id="controls" tabindex="0"
        onMouseOut="ocultarControles()" onMouseOver="mostrarControles()">
    ...
</div>
person Tim Down    schedule 31.10.2012
comment
Я пробовал с этой опцией, и она не работает должным образом в Chrome и Firefox. У меня есть еще один вызов, чтобы сфокусировать ключ на игроке. 'document.getElementById(player).addEventListener('focus', function(event) { controlTeclado(event); }, true); ' - person maceguo; 31.10.2012
comment
Я добавил эту опцию на ‹видео›, и она выглядит нормально, дайте мне немного проверить, и я вернусь! Спасибо ребята!!!!! - person maceguo; 31.10.2012