JQuery custom video controls refuse to coexist

Question

I have been working on a custom video controls for my school project and I wanted to add custom play/pause and sound/mute buttons, progress bar and volume slider. I followed tutorial on the play/pause and progress bar from yt video by iEatWebsites, works perfectly but once I started adding functions to other elements the play/pause button refuses to react and becomes unclickable. When I add function onclick alert with sound/mute button it still works and muting video with just command line also still works so i have no idea wheres the issue

everything is in controls div in html:

<header>
              <div class="container">
                  <div class="c-video">
                    <video id="my_vid" class="video" src="video.mp4"></video>
                      <div class="controls">
                          <div class="buttons">
                          <button id="play-pause"></button>
                          </div>
                          <div class="green-bar">  
                          <div class="green-juice"></div> 
                          </div>
                          <div class="buttons2">
                          <button id="sound-mute"></button> 
                          </div>
                        <div class="slidecontainer">
                            <input type="range" min="1" max="100" value="50" class="slider" id="volume">
                        </div>
                      </div>
                    </div>
                </div>
        </header>

and my .js file:

var video = document.querySelector(".video");
var juice = document.querySelector(".green-juice");
var btn = document.getElementById("play-pause");
var butn = document.getElementById("sound-mute");
var volume = document.querySelector("#volume")


function togglePlayPause() {
    if (video.paused) {
        btn.className = 'pause';
        video.play();
    } else {
        btn.className = "play";
        video.pause();
    }
};

btn.onclick = function() {
togglePlayPause();
};



video.addEventListener('timeupdate', function(){
var juicePos = video.currentTime / video.duration;
juice.style.width = juicePos * 100 + "%";
    if(video.ended){
       btn.className = "play";
       }
});


$("video").prop('muted', false); //mute

function videoMute() {
    if $("video").prop('muted', false) {
        $("video").prop('muted', true);
        butn.className = "mute";
    } else {
        butn.className = "sound";
        $("video").prop('muted', false);
    }
};


butn.onclick = function() {
   videoMute();
};

volume.addEventListener('timeupdate', function(e){
    video.volume = e.currentTarget.nodeValue / 100;
});

Answer 1

There is a syntax error in the JS code, which could prevent everything from working. I recommend using proper code editor and/or setting up a linter.

You're missing parenthesis in the condition on the line 36. Also prop function with two arguments is not for reading. It should look like this:

if ($("video").prop('muted') === false) {

For volume event, you're not supposed to listen for time update. Also nodeValue is not what you think. You're probably looking for:

volume.addEventListener('change', function(e){
    video.volume = e.currentTarget.value / 100;
});

Finally, I'll hopefully save you some time with this:

var bar = document.querySelector(".green-bar");
bar.addEventListener('click', function(e) {
  video.currentTime = e.offsetX / e.currentTarget.offsetWidth * video.duration;
});

Answer 2

you need to put some text on the button and a starting class.. here it is

<style>
.play::before { content: 'play'; }
.pause::before { content: 'pause'; }
</style>

<button id="play-pause" class="play"></button>

function togglePlayPause() {
    if (btn.className == 'play') {} //Testing what you know
}