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>

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>

• javascript
• html
• html5-video
• addeventlistener
• video.js

• Does spelling "playsinline" with a capital "I" solve it? As mentioned here: github./videojs/video.js/issues/4222 – David Commented Oct 23, 2020 at 12:24

1 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 );