通过 intersection observer api 监听视频元素是否进入视口，结合 vimeo player sdk 实现精准的“进入即播、离开即停”，避免多视频误触发，提升性能与用户体验。
实现视频按需播放（in-viewport playback）的核心在于解耦监听逻辑与播放控制：每个视频应独立判断自身可见性，并调用对应 Vimeo Player 实例的方法。原代码中使用 $("iframe").position().top 静态计算位置、共享滚动监听器且未实时更新元素坐标，导致所有视频响应同一视口条件，是问题根源。
✅ 推荐方案：使用现代、轻量、高性能的 IntersectionObserver API（原生支持，无需 jQuery），为每个 <iframe> 单独创建观察器或复用一个观察器批量处理。
✅ 正确实现步骤
-
为视频容器添加语义化 class 并确保 iframe 具备唯一 ID（便于调试）
<iframe class="video" id="video1" src="https://player.vimeo.com/video/757127483?background=true&autoplay=false" width="920" height="200" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe> <iframe class="video" id="video2" src="https://player.vimeo.com/video/807516670?background=true&autoplay=false" width="920" height="200" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe>
⚠️ 关键：务必添加 &autoplay=false 参数，禁用 Vimeo 默认自动播放行为，否则 player.play() 可能被浏览器策略阻止。
-
引入 Vimeo Player SDK（放在 </body> 前）
<script src="https://player.vimeo.com/api/player.js"></script>
-
JavaScript：使用 IntersectionObserver 精准控制每个视频
// 选择所有带 .video 类的 iframe 元素 const videoElements = document.querySelectorAll('.video'); // 创建 IntersectionObserver 实例（默认监听 0% 可见即触发） const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { // 每个 entry 对应一个被观察的 iframe if (!entry.target.player) { // 首次进入时初始化 Vimeo Player 实例，并缓存到 DOM 元素上 entry.target.player = new Vimeo.Player(entry.target); } if (entry.isIntersecting) { // 进入视口：尝试播放（返回 Promise，可 catch 错误） entry.target.player.play().catch(e => { console.warn(`Playback prevented for ${entry.target.id}:`, e.message); }); console.log(`${entry.target.id} → playing`); } else { // 离开视口：暂停播放 entry.target.player.pause().catch(() => {}); console.log(`${entry.target.id} → paused`); } }); }, { // 可选：设置触发阈值（例如 0.1 = 10% 可见时即触发） threshold: 0.1 }); // 开始观察每一个视频元素 videoElements.forEach(el => observer.observe(el));
? 注意事项与最佳实践
- 性能优先：IntersectionObserver 是浏览器原生异步 API，比 scroll 事件监听 + getBoundingClientRect() 计算高效得多，无卡顿风险。
- 错误处理：player.play() 可能因用户手势策略（如 Chrome 的 Autoplay Policy）被拒绝，务必用 .catch() 捕获并静默处理，避免阻塞逻辑。
- 懒初始化 Player：不要在页面加载时就为所有 iframe 创建 Vimeo.Player 实例（浪费资源），而应在首次进入视口时创建（如上例中 if (!entry.target.player) 判断）。
- 无障碍友好：可配合 preload="metadata" 属性加速首帧加载，同时不影响初始性能。
- 兼容性：IntersectionObserver 在所有现代浏览器中均受支持（caniuse.com）；如需支持 IE，需引入 polyfill（如 intersection-observer）。
✅ 总结
用 IntersectionObserver 替代手动滚动计算，不仅修复了“多视频同步播放”的 Bug，更带来更可靠、更高效、更符合现代 Web 标准的解决方案。每个视频拥有独立生命周期与播放状态，逻辑清晰、易于维护，且天然支持动态增删视频元素（只需对新元素调用 observer.observe() 即可）。
