.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

嗨！我附上了这条线。现在浏览器记录按键。但视频不会改变。是否有可能编码这个搞砸了HTML？我将代码添加到原始poste。 – Aljosa

.keypress在浏览器不工作（除铬）

回答

相关问题