Mute and Volume Button for HTML5 Video Player

Question

I'm trying to enter in some JavaScript code that'll cause the volumeslider to go all the down when the mute button is clicked.

The functions I have for my mute button and volume slider is here

    function vidmute () { 
     if(vid.muted){ 
        vid.muted = false; 
        mutebtn.innerHTML = "Mute"; 

    } else { 
         vid.muted= true; 
         mutebtn.innerHTML = "Unmute";   
     } 
}

       function setVolume () { 
          vid.volume = volumeslider.value / 100; 
}

I've tried entering in vid.volume = volumeslider.value / 100 for the if statement for vidmute and vid.volume = volumeslider.value / 0 for the else statement for vidmute and it doesn't seem to work. I also tried these statements vid.mutebtn = volumeslider.value / 100 and vice versa and still doesn't work. Can anyone help me with this?

Answer 1

Use vid.volume = 0 .

This is what vid.volume = volumeslider.value / 100; is doing:

1. get volumeslider 's value (between 0 and 100)
2. divide it by 100 to get a result between 0.0 and 1.0
3. assign the value to vid.volume

By changing vid.volume = volumeslider.value / 100 to vid.volume = volumeslider.value / 0 you were actually increasing* the value (and obviously passing a value larger than the maximum accepted doesn't mute the volume)

*Theoretically; decreasing the divisor would produce a larger result. In any programming language this is not allowed and would throw an error.

Answer 2

I'm assuming you have a separate volumeslider element in your HTML and you want it to be set to 0 if you click a mute button.

Try this code:

function vidmute () { 
  if(vid.muted){ 
    vid.muted = false; 
    mutebtn.innerHTML = "Mute";
    vidslider.value = 0;
  } else { 
    vid.muted = true; 
    mutebtn.innerHTML = "Unmute";   
    vidslider.value = vid.volume * 100;
  } 
}

This works as follows: vid.volume is the volume of your video. It's values are between 0 and 1.

vidslider.value is the position of your slider, it's values are between 0 and 100.

You can assign a value to a variable if you put the variable to the left of the "=" like this:

a = 5;

Now the value of "a" is set to 5.

You want to set the value of your slider to 0. So you put your slider to the left side of the "=":

vidslider.value = 0;

Now your slider is set to the leftmost position, if the video was muted.

If you click "unmute", you want the slider to be set to the original position. Therefore you first need to read the volume of the video, and then set it as the value of the slider.

vidslider.value = vid.volume;

Now remember that the vidslider value could be 0-100, whereas the vid volume has a range 0-1. So you have to multiply the volume with 100 to get it to the correct range

vidslider.value = vid.volume * 100;

Have fun and please try to ask questions with the whole problem explained in a short example, so we know exactly what you need to know.