Hey.
Making my own loading screen resource for QBcore with very basic html and javascript.
Got a background video and separate audio div. Set up a javascript to mute the audio when spacebar has been pressed and everything seems to work fine except that spacebar is only being registered after i do a single mouse click anywhere on the screen. Almost like fivem/gta is not the active screen. Any help with this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
<div class="video-wrapper">
<video class="bcvideo" autoplay loop muted>
<source src="media/2.mp4" type="video/mp4">
</video>
<div class="logo">
<img src="media/logo.png" alt="">
<div class="mutebutton">
<img class="mute" id="mute" src="media/mute.png">
<span class="caption" id="spacebar">Press spacebar to mute</span>
</div>
</div>
<div class="music-box">
<audio class="music-element" id="music-element" autoplay loop>
<source src="media/loadmusic.mp3" type="audio/mp3">
</audio>
</div>
</div>
<script src="JS/JS.js" type="text/javascript"></script>
</body>
</html>
Javascript
var mute = false;
document.body.onkeyup = function(e) {
if ((e.keyCode == 32) && mute == false) { // Check if the pressed key is the spacebar
document.getElementById('music-element').muted = true;
document.getElementById('mute').src = "../media/unmute.png";
document.getElementById('spacebar').textContent = "Press spacebar to unmute";
mute = true
} else {
document.getElementById('music-element').muted = false;
document.getElementById('mute').src = "../media/mute.png";
document.getElementById('spacebar').textContent = "Press spacebar to mute";
mute = false;
}
}