.keypress funktioniert nicht in Browsern (außer Chrome)

Ich habe eine js, die in keinem Browser außer Chrom funktioniert? Ist es vielleicht die .keydown-Funktion, die Probleme macht? Es gibt einen Ausschnitt des Codes. Es wird als interaktives Video erstellt und wenn eine Taste gedrückt wird, sollte eine andere Videoebene eingeblendet werden..keypress funktioniert nicht in Browsern (außer Chrome)

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); 
    });

Browser gibt keine Fehler. Und ich weiß nicht, wo ich von hier aus weitermachen soll. Irgendwelche Ideen?

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>

Quelle

2017-01-29 Aljosa

Versuchen Sie es mit

document.body.addEventListener()

statt document.addEventListener()

Quelle

2017-01-29 12:26:44

Das scheint nicht zu helfen. Sollte ich etwas anderes ersetzen? – Aljosa

Ich denke, das Problem ist mit Ihren Stilen und nicht mit Skript –

– Aljosa

Wie ich weiß, Tastatur Verwandte Ereignisse werden nur ausgelöst, wenn das Element den Fokus hat. Also im Grunde müssen Sie den Fokus darauf geben, richtig zu arbeiten. Was ist mit dem Anhängen eines Ereignisses auf einem Fensterobjekt?

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

Ich habe nur auf Chrom und FF überprüft, beide wurden bearbeitet.

Quelle

2017-01-29 14:39:56 modernator

Hallo! Ich habe die Leitung angeschlossen. Jetzt zeichnet der Browser den Tastendruck auf. Aber Videos ändern sich nicht. Ist es möglich, dass der Typ, der das codiert hat, etwas in HTML versaut hat? Ich habe den Code zum ursprünglichen Beitrag hinzugefügt. – Aljosa

.keypress funktioniert nicht in Browsern (außer Chrome)

Antwort

Verwandte Themen