移除EventListener实现向下滚动时视频从5秒处恢复播放

• 你写的removeEventListener不生效，核心原因是绑定timeupdate事件时传入的是匿名函数，没有保留函数引用，这种情况下调用移除方法无法匹配到之前注册的回调，旧的监听逻辑会一直存在——视频刚恢复播放就会再次被判断为播放进度≥5秒，立刻被暂停，自然达不到继续播放的效果。
• 现有代码还存在两个隐患：一是没有做触发锁，向下滚动时滚轮事件会连续触发，重复执行移除事件、调用play的逻辑，容易造成播放异常；二是原代码缺少滚动方向判断的具体实现，直接给body绑定滚轮事件在部分页面布局下会失效。

页面中的视频元素不需要做任何改动，JS部分调整为如下写法即可实现需求：

const video = document.getElementById('home-hero-video');
// 标记位：避免滚动时重复触发恢复播放逻辑
let hasResumed = false;

// 将timeupdate回调抽为命名函数，才能被精准移除
function handleTimeCheck() {
    if (this.currentTime >= 5) {
        this.pause();
    }
}
// 注册播放进度监听
video.addEventListener('timeupdate', handleTimeCheck, false);

// 滚轮方向判断逻辑
function isScrollUp(event) {
    return event.wheelDelta ? event.wheelDelta > 0 : event.deltaY < 0;
}

function onWheelScroll(event) {
    // 已经触发过恢复播放就直接返回，不重复执行
    if (hasResumed) return;
    if (!isScrollUp(event)) {
        // 向下滚动时：先移除进度检查的监听，再恢复播放
        video.removeEventListener('timeupdate', handleTimeCheck, false);
        video.play();
        hasResumed = true;
    }
}

// 绑定滚轮监听，加passive配置提升滚动性能
window.addEventListener('wheel', onWheelScroll, { passive: true });

补充说明：如果你的页面是局部滚动（滚动条在某个设置了固定高度、overflow: auto/scroll的容器上，而非整个窗口），只需要把最后一行代码绑定监听的window替换成对应的滚动容器元素即可，其余逻辑无需修改。代码生效后，视频会在首次播放到5秒时自动暂停，用户第一次向下滚动时从5秒的暂停位置继续播放直到结束，不会被中途打断。

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