In my website, I have background music and a background video (webm format) embedded. I am facing an issue with making play/pause buttons in the form of png images work for both the video and the music.
The background music is added using the embed tag with id music:
<embed src="resources/bgsound.mp3" autostart="true" loop="true" hidden="true" id="music">
I prefer not to use the UI controls and want to stick with custom play/pause button images in .png format. The video is added as follows:
<video playsinline autoplay muted loop poster="resources/csgotrailer.png" id="bgvid">
<source src="resources/csgotrailer.webm" type="video/webm">
</video>
Below are the images intended to act as buttons:
<img src="images/play.png" alt="Play" height="30" width="30" id="play">
<img src="images/pause.png" alt="Pause" height="30" width="30" id="pause">
(each with their specific IDs). Here is the CSS styling for these images:
#play {
position: fixed;
top: 5%;
left: 5%;
opacity: 0.175;
}
#pause {
position: fixed;
top: 5%;
left: 9%;
opacity: 0.175;
}
The goal is to pause both the video and the music when clicking on #pause button, and resume playback when clicking on #play button. I have tried multiple JavaScript corrections but so far nothing seems to work:
var vid = document.getElementById("bgvid"),
pauseButton = document.getElementById("pause"),
playButton = document.getElementById("play"),
mus = document.getElementById("music");
playButton.addEventListener("click", function(event) {
if (vid.paused == false && mus.paused == false)
return;
else {
vid.play();
mus.play();
}
});
pauseButton.addEventListener("click", function(event) {
if (vid.paused == true && mus.paused == true)
return;
else {
vid.pause();
mus.pause();
}
});
No errors or warnings are showing up in the browser console, yet there is no response when clicking on the buttons. The script is linked in index.html as follows:
<script src="assets/js/buttons.js"></script>
The file is in the correct folder and all other scripts are functioning properly. Placing this script before others causes some of them to stop working and display errors. Any suggestions on what might be causing this issue?
Thank you for your help.