本文介绍使用 intersection observer api 实现视频的“懒加载式”播放控制：每个视频仅在其进入浏览器视口时自动播放，离开视口时自动暂停，避免资源浪费与用户体验干扰。
在构建现代响应式网页时，对媒体元素（尤其是视频）进行智能播放控制至关重要。用户滚动页面时，若所有视频同时自动播放，不仅消耗带宽与 CPU 资源，还可能造成音频冲突、电量激增及可访问性问题。理想方案是——按需激活：仅当视频元素完全或部分出现在可视区域（viewport）内时才开始播放，移出后立即暂停。
✅ 推荐方案：使用 IntersectionObserver（现代、高效、无性能陷阱）
相比传统的 scroll 事件监听（易触发高频回调、需手动计算位置、存在兼容性与性能隐患），IntersectionObserver 是浏览器原生提供的轻量级异步观察 API，专为检测元素可见性而设计，性能优异且代码简洁。
以下是完整、可直接运行的实现方案：
1. HTML 结构（关键：为每个视频添加统一 class 并禁用自动播放）
<iframe class="video" id="video1" src="https://player.vimeo.com/video/757127483?background=true&autoplay=false&loop=false" width="920" height="200" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen> </iframe> <iframe class="video" id="video2" src="https://player.vimeo.com/video/807516670?background=true&autoplay=false&loop=false" width="920" height="200" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen> </iframe>
⚠️ 重要注意事项：
- 必须添加 &autoplay=false 参数（如上所示），否则 Vimeo 默认可能触发自动播放，破坏控制逻辑；
- allow="autoplay" 是必需的权限声明，但实际播放行为由 JS 主动调用 player.play() 控制；
- 建议补充 loop=false 避免意外循环，增强可控性。
2. JavaScript（纯原生，无需 jQuery）
// 确保 Vimeo Player SDK 已加载（放在 </body> 前）
// <script src="https://player.vimeo.com/api/player.js"></script>
document.addEventListener('DOMContentLoaded', () => {
const videos = document.querySelectorAll('.video');
// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
const iframe = entry.target;
const player = new Vimeo.Player(iframe);
if (entry.isIntersecting) {
// 元素进入视口 → 播放
player.play().catch(e => {
console.warn(`Video ${iframe.id} playback prevented (e.g., muted autoplay policy):`, e);
});
console.log(`▶️ Playing: ${iframe.id}`);
} else {
// 元素离开视口 → 暂停
player.pause().catch(e => {
console.debug(`Pause ignored for ${iframe.id}:`, e);
});
console.log(`⏸️ Paused: ${iframe.id}`);
}
});
},
{
threshold: 0.1 // 当 10% 视频区域可见时即触发播放（可调：0=任意像素，1=完全可见）
}
);
// 开始观察每个视频元素
videos.forEach(video => observer.observe(video));
});✅ 为什么这个方案更优？
- 精准独立控制：每个 <iframe> 单独实例化 Vimeo.Player，互不干扰，彻底解决原文中“一个进视口、两个全播”的 Bug；
- 高性能：IntersectionObserver 异步执行，不阻塞主线程，无 scroll 事件节流/防抖烦恼；
- 语义清晰：isIntersecting 属性直白表达可见状态，逻辑一目了然；
- 健壮容错：.play() 可能因浏览器策略（如静音自动播放限制）被拒绝，已用 .catch() 安静处理，不影响其他视频；
- 灵活可配：通过 threshold 选项可精细调节触发灵敏度（例如设为 0.5 表示半数可见才播放）。
? 扩展建议（进阶）
- 若需支持 <video> 原生标签（非 Vimeo iframe），可直接调用 video.play() / video.pause()，无需额外 SDK；
- 添加 loading="lazy" 属性（对 <iframe> 支持有限，但未来可期）；
- 结合 prefers-reduced-motion 媒体查询，在用户开启“减少动画”时跳过自动播放；
- 为无障碍考虑，可为视频容器添加 aria-label 和播放/暂停状态提示。
通过以上实现，你将获得一个专业、稳定、符合现代 Web 最佳实践的视口感知视频播放系统——既节省资源，又提升用户专注度与页面流畅度。
