自定义视频静音按钮点击切换图标异常，寻求修复方案

云上老周

2026-7-4

修复视频静音按钮图标切换异常问题

问题根源

初始状态视频设置为muted="muted"（静音），图标默认是fa-volume-up，符合需求，但原有代码逻辑仅操作单个图标类：

首次点击时，视频从静音转为非静音，代码仅移除fa-volume-up，未添加fa-volume-off，导致图标消失
后续点击仅切换单个类，无法同步更新对应状态的图标，造成显示混乱

修复后的代码

替换原有的script部分即可：

<script>
function muteToggle() {
    let vid = document.getElementById("myVideo");
    let element = document.getElementById("mute-button-icon");

    // 切换视频静音状态
    vid.muted = !vid.muted;

    // 根据静音状态同步切换图标
    if (vid.muted) {
        // 静音时显示音量开启图标
        element.classList.remove("fa-volume-off");
        element.classList.add("fa-volume-up");
    } else {
        // 非静音时显示音量关闭图标
        element.classList.remove("fa-volume-up");
        element.classList.add("fa-volume-off");
    }
}
</script>

更简洁的写法（利用classList.toggle的布尔参数）

如果偏好更简洁的代码，可以用toggle的第二个布尔参数直接控制类的添加/移除：

<script>
function muteToggle() {
    let vid = document.getElementById("myVideo");
    let element = document.getElementById("mute-button-icon");

    vid.muted = !vid.muted;

    // 静音时保留fa-volume-up，移除fa-volume-off；反之亦然
    element.classList.toggle("fa-volume-up", vid.muted);
    element.classList.toggle("fa-volume-off", !vid.muted);
}
</script>