通过 intersection observer api 监听视频元素是否进入视口，结合 vimeo player sdk 实现精准的“进入即播、离开即停”，避免多视频误触发，提升性能与用户体验。

实现视频按需播放（in-viewport playback）的核心在于解耦监听逻辑与播放控制：每个视频应独立判断自身可见性，并调用对应 Vimeo Player 实例的方法。原代码中使用 $("iframe").position().top 静态计算位置、共享滚动监听器且未实时更新元素坐标，导致所有视频响应同一视口条件，是问题根源。

✅ 推荐方案：使用现代、轻量、高性能的 IntersectionObserver API（原生支持，无需 jQuery），为每个

✅ 正确实现步骤

1. 为视频容器添加语义化 class 并确保 iframe 具备唯一 ID（便于调试）

   

   Java Api Extractor

   从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

   下载

   <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() 可能被浏览器策略阻止。

2. 引入 Vimeo Player SDK（放在