Проблем със закачането на 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 работи добре в chrome и opera, така че редактирах заглавието ви.   -  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
Добавих тази опция към ‹video› и изглежда добре, позволете ми да направя тест и ще се върна! Благодаря момчета!!!!! - person maceguo; 31.10.2012