如何用HTML/JS实现视频进入视口时自动播放并退出时暂停

问题分析 #

你的代码存在两个核心问题，导致无法实现无手动操作的自动播放：

1. 语法错误：entry.target.pause缺少括号，应改为entry.target.pause()，否则不会执行暂停操作。
2. 浏览器自动播放限制：现代浏览器默认禁止有声视频自动播放，必须满足视频静音或用户已有页面交互的条件，才能触发自动播放。

修改后的完整代码 #

<html>
    <head>
        <style>
            .video-item {
                margin-top: 1500px;
                margin-bottom: 1000px;
                width: 100%;
                max-width: 800px;
            }
        </style>
    </head>
    
    <body>
        <!-- 给视频添加muted和playsinline属性，适配浏览器自动播放规则 -->
        <video class="video-item" src="video_ex.mp4" muted playsinline></video>
        <video class="video-item" src="video_ex2.mp4" muted playsinline></video>

        <script>
            // 配置IntersectionObserver参数，threshold可根据需求调整
            let options = {
                root: null,
                rootMargin: '0px',
                threshold: 0.5 // 视频50%进入视口时触发播放/暂停
            };

            let callback = (entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting){
                        // 捕获播放失败的情况，便于调试
                        entry.target.play().catch(err => {
                            console.log('自动播放失败：', err);
                        });
                    }
                    else {
                        entry.target.pause();
                    }
                });
            }

            let observer = new IntersectionObserver(callback, options);
            // 监听所有video元素，支持多视频场景
            document.querySelectorAll('.video-item').forEach(video => {
                observer.observe(video);
            });
        </script>
    </body>
</html>

关键修改点说明 #

• 添加muted和playsinline属性：muted满足浏览器自动播放的静音要求，playsinline确保移动端视频在页面内播放而非全屏弹出，规避自动播放限制。
• 修复暂停语法错误：补全pause()方法的括号，确保视频退出视口时能正常暂停。
• 适配多视频场景：使用类选择器.video-item替代单个id，遍历所有视频元素添加监听，支持页面内多个视频的自动播放逻辑。
• 优化触发阈值：将threshold设为0.5，视频一半进入视口时就触发播放，提升用户体验（可根据需求调整为0-1之间的数值）。

额外优化（可选） #

如果希望用户交互后恢复视频音量，可添加全局点击事件，用户点击页面任意位置后取消所有视频静音：

document.body.addEventListener('click', () => {
    document.querySelectorAll('.video-item').forEach(video => {
        video.muted = false;
    });
}, { once: true });

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