使用jQuery实现视频静音/取消静音功能失效问题排查

问题根源 #

1. 事件绑定错误：原代码中按钮绑定的是clicked事件，jQuery标准点击事件应为click，导致点击操作完全没触发回调逻辑。
2. 逻辑执行时机错误：取消静音的判断代码在页面加载时仅执行一次，点击按钮后不会重新触发，无法动态修改视频静音状态。
3. 浏览器自动播放政策限制：包括Safari在内的多数浏览器要求带声音的视频播放必须由用户交互触发，需确保取消静音和播放操作在用户点击回调内完成。

修正后的代码 #

jQuery部分

var audioClicked = false;
$("video").prop('muted', true);

// 修正事件名为click，并将取消静音逻辑移入回调
$('#btnBegin').on('click', function() {
    audioClicked = true;
    $("video").prop('muted', false);
})

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({  
    trigger: "#teaching",
    start: "top top", 
    end: "+=1300",
    pin: true,
    pinSpacing: false,
    reverse: true,
    onEnter: () => {
        $('#teaching')[0].play();
    },
    onLeave: () => {
        $('#teaching')[0].pause();
    },
    onLeaveBack: () => {
        $('#teaching')[0].pause();
    },
    onEnterBack: () => {
        $('#teaching')[0].play();
    }
}); 

额外优化建议 #

若需确保仅在用户点击按钮后才播放带声音的视频，可在ScrollTrigger的播放回调中增加状态检查：

onEnter: () => {
    if (audioClicked) {
        $('#teaching')[0].play();
    }
},
onEnterBack: () => {
    if (audioClicked) {
        $('#teaching')[0].play();
    }
}

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