设置IntersectionObserver threshold为1时，HTML5视频半入视口为何自动播放？

核心原因 #

你的问题根源是播放逻辑的条件判断不严谨：当视频播放完毕后video.paused会变为true，但原代码只要检测到视频处于暂停状态就直接调用play()，完全忽略了当前视频是否真的完全进入视口（即intersectionRatio === 1）的判断。哪怕视频只露出一小部分，只要它是暂停状态，代码就会触发播放，这和你设置threshold:1要求“完全进入视口才播放”的逻辑完全冲突。

另外还有个隐藏问题：你把IntersectionObserver的初始化放在了playPromise.then()里面，这意味着只有第一次播放成功后才会创建观察者。但视频播放完毕后状态变为暂停，此时观察者的回调逻辑依然只会判断video.paused，不会重新校验视口交集状态。

解决步骤 #

1. 严格限定播放触发条件：播放动作必须同时满足三个条件：视频处于暂停状态、视频完全进入视口（entry.intersectionRatio === 1）、当前处于相交状态（entry.isIntersecting）。
2. 将观察者初始化移到playPromise外部：确保不管视频是否播放过，从一开始就监听视口状态，而非仅在第一次播放成功后才创建观察者。
3. 优化暂停逻辑：只要视频不在视口内，或未完全占满视口，就暂停播放，逻辑更清晰。

修改后的代码 #

/**AUTOPLAY VIDEO IN VIEWPORT**/

function playPauseVideo() {
    let videos = document.querySelectorAll("video");
    videos.forEach((video) => {
        // 满足自动播放策略要求
        video.muted = true;
        
        // 提前初始化观察者，不依赖播放Promise
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    // 完全进入视口 + 视频暂停 → 播放
                    if (entry.isIntersecting && entry.intersectionRatio === 1 && video.paused) {
                        video.play();
                    } 
                    // 未完全在视口内 + 视频正在播放 → 暂停
                    else if ((!entry.isIntersecting || entry.intersectionRatio !== 1) && !video.paused) {
                        video.pause();
                    }
                });
            },
            { threshold: 1 }
        );
        observer.observe(video);

        // 首次加载尝试自动播放（兼容浏览器自动播放策略）
        const playPromise = video.play();
        if (playPromise !== undefined) {
            playPromise.catch(err => {
                // 自动播放失败无需处理，等进入视口再触发播放
                console.log("自动播放触发失败:", err);
            });
        }
    });
}

// 启动函数
playPauseVideo();

额外说明 #

• 观察者提前初始化后，每个视频从页面加载时就会被监听视口变化，不会错过任何状态切换。
• 播放条件的双重校验（isIntersecting + intersectionRatio ===1）确保只有视频完全进入视口才会触发播放，彻底解决“部分进入就播放”的问题。

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