I have a full screen 360 video but i want a mute button to be in the top right corner of the video. So far when loading at the start you can see the button but when the 360 video loads it does not appear, I assume it is above the video. How can I get it to appear? I am using a frame for the 360 video. Thanks
<!DOCTYPE html>
<html>
<body>
<!-- As if this Glitch were a typical HTML CodePen... -->
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://code.jquery.com/jquery-git2.js"></script>
<!-- Use components defined in separate files. -->
<script src="files/arrow-key-rotation.js"></script>
<script src="files/play-on-window-click.js"></script>
<script src="files/play-on-vrdisplayactivate-or-enter-vr.js"></script>
<script src="files/hide-once-playing.js"></script>
<style>
</style>
<body>
</body>
<!-- Specify our scene. -->
<a-scene>
<div class="mutebg"> <button id="mutebtn">Unmute</button> </div>
<a-assets>
<img id="startImage" src="https://cdn.glitch.global/ed9b722b-2185-451e-ac3b-efb27ab7e5bd/start-imagee2.jpg?v=1682461516019">
<!-- Single source video just like a normal HTML video element declaration -->
<video id="video"
autoplay loop crossorigin="anonymous" playsinline webkit-playsinline>
<!-- MP4 video source. -->
<source type="video/mp4" src="https://cdn.glitch.me/2ffc75ed-46f3-4406-a68f-3a529ff49d1f/360_Trim.mp4?v=1682594245157"/>
</video>
<a-sky id="skyimage" src="#video"></a>
</a-assets>
<a-videosphere src="#video"
play-on-window-click
play-on-vrdisplayactivate-or-enter-vr>
</a-videosphere>
<!-- Define camera with zero user height, movement disabled and arrow key rotation added. -->
<a-camera user-height="0" wasd-controls-enabled="false" arrow-key-rotation>
<!-- Text element for display messaging. Hide once video is playing. -->
</a-camera>
<!-- Wait for the video to load. -->
<!-- buttons. -->
<a-plane class="autumnsceneplane" position="-10 2 3" rotation=" 0 90 0" height="2" width="5" color="#68a4af" >
<a-text value="Cage size" scale="2 2 2" align="center" ></a-text>
</a-plane>
</a>
<a-plane class="autumnsceneplane3" rotation="-90 0 0" width="2" color="#68a4af">
<a-text value="PlayPen" scale="1 1 1" align="center" ></a-text>
</a-plane>
<a-plane class="autumnsceneplane4" position="-2 1 -9" height="2" width="5" color="#68a4af" >
<a-text value="Sleep" scale="2 2 2" align="center" ></a-text>
</a-plane>
</a>
<a-plane id="autumnsceneplane" position="-8 -3 -10" rotation="0 45 0" height="2" width="5" color="#68a4af">
<a-text value="Click on Me " scale="2 2 2" align="center" ></a-text>
</a-plane>
<a-plane class="autumnsceneplane" position="-8 -3 -10" rotation="0 45 0" height="2" width="5" color="#68a4af">
<a-text value="Click on Me " scale="2 2 2" align="center" ></a-text>
</a-plane>
<a-plane class="autumnsceneplane2" position="10 0 -3" rotation="0 -90 0" height="2" width="5" color="#68a4af">
<a-text value="Sleep Schedule" scale="2 2 2" align="center" ></a-text>
</a-plane>
<a-entity id="msg" geometry="primitive: plane; width:8; height:6" position="0 -0.3 -1.5" material="src:#startImage"
hide-once-playing="#video">
</a-entity>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
<script>
var mutebtn;
intitializePlayer() // **don't forget to call the initialize**
function intitializePlayer(){
//set object references
vid = document.getElementById("video");
mutebtn = document.getElementById("mutebtn");
//add event listener
mutebtn.addEventListener("click",vidmute,false); // **quotes only around the event**
}
function vidmute(){ // **there was an extra '.' between function and vidmute**
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
document.querySelector('.autumnsceneplane').addEventListener('click', function(evt) {
window.open("files/cagesize.html");
})
document.querySelector('.autumnsceneplane2').addEventListener('click', function(evt) {
window.open("files/sleep.html");
})
document.querySelector('.autumnsceneplane3').addEventListener('click', function(evt) {
window.open("files/playpen.html");
})
document.querySelector('.autumnsceneplane4').addEventListener('click', function(evt) {
window.open("files/sleep.html");
})
</script>
</body>
</html>
CSS:
.mute-button {
position: absolute;
top: 20px;
right: 20px;
z-index: 9999;
background-color: #fff;
color: #333;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
}
Replace your button with this one:
<div id="mutebtn" class="mute-button">the sound is on</div>
Remembering that your code has some errors and must be corrected, but this code will solve your sound button problem.