Question

我有以下与我的视频相关联的标记：

<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">

以下js显示我的音量范围输入和带有功能的静音按钮：

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){

    }

}

此刻，当我点击静音按钮时，范围设置为0，这是完美的。但是，我想要实现的目标是：

单击取消静音按钮时，输入范围将恢复为之前的音量。

我怎样才能做到这一点？

对任何问题的评论，谢谢，克里斯

Answer 1

为什么不在将卷设置为0之前将其存储在另一个变量中？然后，当音量取消静音时，只需将音量设置回先前的值？

Here is a quick jsfiddle POC。我将尝试将其集成到您的代码中。（为了清楚起见，我将在这里使用document.getElementById：

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;
    }
}

取消我的HTML5视频中的音量

1 个答案: