如何解决HTML背景视频播放按钮点击时意外解除静音的问题

问题原因 #

1. 音量按钮选择器不匹配：HTML中音量按钮的类名为soundcontrol，但JS事件绑定用的是.sound-control，二者不一致导致音量按钮的点击逻辑完全不生效，之前修改静音的操作实际没有触发，容易误以为是播放按钮导致静音状态异常。
2. 播放按钮逻辑冗余：播放按钮的点击事件中，每次触发播放时都强制设置了mobileVideo.muted = true，会覆盖用户之前手动调整的静音状态，不符合“播放按钮仅控制播放暂停、不修改音频开关”的需求。
3. 类名冲突隐患：播放按钮和音量按钮切换状态用的类名都是playsound，容易造成样式错乱。

修复方案 #

直接替换原有JS代码即可：

var mobileVideo = document.getElementById("mobilevideo"); 
// 初始默认静音
$(".video-mobile video").prop('muted', true);

// 播放/暂停控制
$(".video-mobile .playcontrol").click(function () { 
    if (mobileVideo.paused) {
        // 移除强制静音的代码，保留用户之前设置的静音状态
        mobileVideo.play(); 
        // 播放状态单独用is-playing类，避免和音量控制的类冲突
        $(this).addClass('is-playing');
    } else {
        mobileVideo.pause(); 
        $(this).removeClass('is-playing');
    }
    // 阻止a标签默认跳转页面的行为
    return false;
});

// 音量控制，修正选择器为和HTML一致的soundcontrol
$(".video-mobile .soundcontrol").click(function () {
    if ($(".video-mobile video").prop('muted')) {
        $(".video-mobile video").prop('muted', false);
        $(this).addClass('playsound');
    } else {
        $(".video-mobile video").prop('muted', true);
        $(this).removeClass('playsound');
    }
    return false;
}); 

配套CSS调整 #

需要对应修改播放按钮的图标切换规则，把原来关联.playsound类的选择器改成关联.is-playing即可，示例：

/* 原规则参考，修改前 */
.playcontrol.playsound .play { display: none; }
.playcontrol.playsound .pause { display: inline-block; }

/* 修改后 */
.playcontrol.is-playing .play { display: none; }
.playcontrol.is-playing .pause { display: inline-block; }

内容的提问来源于stack exchange，提问作者atsngr