Unmuting the volume in my HTML5 Video

Question

I have the following markup that is hooked up with my Video:

<button id="mute_button" type="button">Mute</button>
<input type="range" id="video_volume" name="video_volume" min="0" max="100" step="1" value="100">

The following js shows my volume range input and a mute button with there functions:

s = _('video_volume');  
m = _('mute_button');

function muteVideo(){
    if(v.muted){
        v.muted = false;
        m.innerHTML = 'Mute';
    }
    else{
        v.muted = true;
        m.innerHTML = 'Unmute';
        s.value= 0;
    }
}

function changeVolume(){
    v.volume = s.value / 100;

    if(v.muted){

    }

}

At the moment, when I click the mute button, the range is set to 0, which is perfect. But, what I want to achieve is:

When I click the un-mute button, the input range will revert to its prior volume.

How can I achieve this?

Comment for any questions, thanks, chris

Answer 1

Why not just store the value of the volume in another variable before setting it to 0? Then when the volume is unmuted, just set the volume back to the previous value?

Here is a quick jsfiddle POC. I'll try to integrate it into your code below. (I'm going to use document.getElementById here for clarity):

var slider = document.getElementById('video_volume');
var cachedVolume;

function muteVideo(){
    if(v.muted){                     // User clicked 'Unmute'
        slider.value = cachedVolume; // set volume to previous value
        v.muted = false;
        m.innerHTML = 'Mute';
    }
    else{                             // User clicked 'Mute'
        cachedVolume = slider.value;  // store value of volume in another variable
        v.muted = true;
        m.innerHTML = 'Unmute';

        slider.value= 0;
    }
}