.keypress не работает в браузерах (кроме хрома)

У меня есть js, который не работает ни в одном браузере, кроме хрома? Может быть, функция .keydown создает проблемы. Существует фрагмент кода. Он создается как интерактивное видео, и когда нажата клавиша, должен появляться другой слой видео..keypress не работает в браузерах (кроме хрома)

var videos = document.querySelectorAll("video"); 
var promises = Promise.all(Array.prototype.slice.call(videos).map(function(video) { 
    return new Promise(function(resolve, reject) { 
     video.addEventListener("canplaythrough", resolve); 
     video.addEventListener("error", reject); 
    }) 
    })) 
    .then(function() { 
    videos.forEach(function(video) { 
     video.play(); 
    }); 
    videos[2].style.display = "none"; 
    document.addEventListener("keydown", function(e) { 
     var key = e.key; 
     if (key === "b" || key === "B") { 
     videos[2].style.display = "block"; 
     videos[1].style.display = "none"; 
     videos[0].style.display = "none"; 
     } 
    }); 
    videos[1].style.display = "none"; 
    document.addEventListener("keydown", function(e) { 
     var key = e.key; 
     if (key === "a" || key === "A") { 
     videos[2].style.display = "none"; 
     videos[1].style.display = "block"; 
     videos[0].style.display = "none"; 
     } 
    }); 
    document.addEventListener("keyup", function(e) { 
     videos[2].style.display = "none"; 
     videos[1].style.display = "none"; 
     videos[0].style.display = "block"; 
    }); 
    window.focus(); 
    }) 
    .catch(function(err) { 
    console.log(err); 
    });

Браузер не допускает ошибок. И я не знаю, куда идти дальше. Есть идеи?

HTML:

<html> 
    <head> 
    <body bgcolor="#00"> 
    <center><img src="head.png" alt="Head"></center> 
    </head> 
<style> 
video { 
    position: absolute; 
    left: 12vw; 
} 
.full-frame { 
    width:75%%; 
    height:75% 
} 
</style> 
<br><br> 
<div id="video"; overflow: hidden"> 
    <video src="1.mov" style="width: 75%; height: 75%;" autoplay loop></video> 
    <video src="2.mov" style="width: 75%; height: 75%;" autoplay loop></video> 
    <video src="3.mov" style="width: 75%; height: 75%;" autoplay loop></video> 
</div> 
<script type="text/javascript" src="script.js"></script> 
</body> 
</html>

источник

2017-01-29 Aljosa

Попробуйте использовать

document.body.addEventListener()

вместо document.addEventListener()

источник

2017-01-29 12:26:44

Это, похоже, не помогает. Должен ли я заменить что-нибудь еще? – Aljosa

Я думаю, проблема связана со стилями, а не со сценарием –

– Aljosa

Как я знаю, клавиатуры связанные события, являются только огнями, когда элемент имеет фокус. Поэтому в основном вам нужно уделять внимание работе. Как насчет прикрепления события к объекту окна?

window.addEventListener('keydown', (e) => console.log(e.keyCode))

Я только что проверил хром и FF, оба были обработаны.

источник

2017-01-29 14:39:56 modernator

Hi! Я прикрепил линию. Теперь браузер записывает нажатие клавиши. Но видео не меняется. Возможно ли, что парень, который закодировал это, что-то испортил в html? Я добавил код в оригинальное сообщение. – Aljosa

.keypress не работает в браузерах (кроме хрома)

ответ

Смежные вопросы