使用 id="videos" 在“进入部分”时取消视频静音，反之亦然在“离开部分”时静音...事件侦听器？

Question

我拼命地想找到一个可以在“进入特定部分”时控制音频（取消静音/静音）的地方，反之亦然，在“离开部分”时静音...这是由 JS 事件监听器控制的吗？或者可以通过其他方式控制吗？

任何帮助和代码将非常感激。

谢谢

没能完成任何工作，抱歉

Answer 1

如果要切换静音/取消静音，必须用JS来实现。

根据“输入特定部分”的含义（您可以通过将其滚动到视口或将鼠标悬停在其上来输入部分），您必须添加正确的事件侦听器。

代码可能如下所示：

//your section (replace 'section-1' by the ID your section has)
const section1 = document.getElementById('section-1');

//your video (replace 'video-1' by the ID your video has)
const video1 = document.getElementById('video-1');

//if you want to check the scroll position
document.addEventListener('scroll', checkScrollPositionToToggleMuteVideo1, false);

//if you want to check the section for mouse hover
section1.addEventListener('mouseover', unmuteVideo1, false);
section1.addEventListener('mouseleave', muteVideo1, false);

function checkScrollPositionToToggleMuteVideo1(e) {
    //if you choose to check the scroll position, you have to do some calculations here
    //...
    
    if(...) {
        unmuteVideo1();
    }
    
    else {
        unmuteVideo1();
    }
}

function unmuteVideo1() {
    video1.muted = false;
}

function muteVideo1() {
    video1.muted = true;
}