如何用JS/JQuery检测视频全屏状态并实现静音切换？

我来帮你梳理下问题并给出可行的方案，你之前的思路方向是对的，但在事件绑定和DOM操作上有几个关键问题需要修正：

你现有代码的核心问题 #

1. 全屏事件绑定对象错误：全屏状态变化的事件是触发在document上的，而不是单个video元素，所以你绑定在video上的webkitfullscreenchange不会生效。
2. jQuery对象与原生DOM混淆：你用$('.some-video-class')拿到的是jQuery集合，不能直接访问原生DOM的muted属性，必须用jQuery的.prop()方法来操作属性。
3. 未区分全屏进入/退出状态：直接反转静音会导致退出全屏时再次反转（比如进入时取消静音，退出时又变成静音→不静音），不符合你"退出时恢复静音"的需求。

正确的实现方案 #

针对你有动态生成video的场景，我们可以监听全局的全屏切换事件，根据当前全屏状态来控制对应video的静音：

方案1：全局控制所有符合类名的Video

这个方案会在进入全屏时取消当前全屏video的静音，退出全屏时恢复所有目标video的静音：

// 监听所有主流浏览器的全屏切换事件
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
    // 获取当前处于全屏状态的元素（兼容各浏览器）
    const fullscreenEl = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.mozFullScreenElement || 
                         document.msFullscreenElement;

    if (fullscreenEl) {
        // 进入全屏：如果当前全屏元素是目标video，取消静音
        if ($(fullscreenEl).is('video.img-fluid.mx-auto.d-block.rounded')) {
            $(fullscreenEl).prop('muted', false);
        }
    } else {
        // 退出全屏：恢复所有目标video的静音状态
        $('video.img-fluid.mx-auto.d-block.rounded').prop('muted', true);
    }
});

方案2：精准控制当前全屏的Video（推荐）

如果希望只恢复之前进入全屏的那个video的静音，避免影响其他可能被手动调整过的video，可以加一个变量跟踪当前全屏的video：

let activeFullscreenVideo = null;

$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
    const fullscreenEl = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.mozFullScreenElement || 
                         document.msFullscreenElement;

    if (fullscreenEl) {
        if ($(fullscreenEl).is('video.img-fluid.mx-auto.d-block.rounded')) {
            activeFullscreenVideo = fullscreenEl;
            $(activeFullscreenVideo).prop('muted', false);
        }
    } else {
        // 退出全屏时，仅恢复之前全屏的video的静音
        if (activeFullscreenVideo) {
            $(activeFullscreenVideo).prop('muted', true);
            activeFullscreenVideo = null;
        }
    }
});

关键细节说明 #

• 兼容多浏览器：代码中包含了webkit、moz、ms前缀的全屏事件，覆盖了大部分主流浏览器的旧版本。
• 动态生成支持：因为我们监听的是document上的全局事件，不管video是页面加载时就存在还是后续动态生成的，只要它进入全屏，就能被正确捕获。
• jQuery属性操作：用.prop('muted', true/false)来操作video的静音状态，这是jQuery操作DOM属性的标准方式，比直接访问原生属性更可靠。

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