VideoJS player custom mute/unmute toggle

Question

I need to add a custom mute/unmute button to a VideoJs player (when I click on the button if it's muted it should unmute and if it's unmuted then it should mute).

I tried to do this in the following way with JavaScript but it doesn't work. Could you help me fix this?

const muteButton = document.querySelector(".mute-btn11");

muteButton.addEventListener("click", function() {
  var video = videojs("myVideo");
  const booleanValue = video.muted.valueOf();
  console.log(booleanValue);

  if (booleanValue == true) {
    video.muted(false);
  } else {
    video.muted(true);
  }
});

<video controls autoplay playsinline id="myVideo" class="video-js vjs-16-9 vjs-big-play-centered"></video>
<button class="mute-btn11"> Mute </button>

Answer 1

Muted is a function of VideJS Player object.

You can get the Player object of your video using this method.

var vp = videojs('myVideo').player();

Then, you can invoke muted() function to get the boolean value.

var muted = vp.muted(); 

To set use muted method with true or false parameter

var muted = vp.muted( true ); 

var muted = vp.muted( false );