如何实现仅含show类的iframe视频自动播放（基于Intersection Observer）

核心修改思路 #

直接在Intersection Observer的回调中，结合Vimeo Player API控制视频播放状态，同时保留原有添加show类的逻辑，无需额外依赖类名做二次判断。

修改后的完整JS代码 #

var players = []
$("iframe").each((index) => {
  players.push({
    player: new Vimeo.Player($("iframe").get(index)),
    element: $("iframe").get(index) // 存储对应DOM元素，用于匹配观察者回调中的目标
  });
});

if(!!window.IntersectionObserver){
  let observer = new IntersectionObserver((entries, observer) => { 
    entries.forEach(entry => {
      // 找到当前iframe对应的播放器实例
      const targetPlayer = players.find(item => item.element === entry.target);
      if(!targetPlayer) return;

      // 保留原有添加/移除show类的逻辑
      entry.target.classList.toggle("show", entry.isIntersecting);

      // 根据视口状态控制播放
      if(entry.isIntersecting){
        targetPlayer.player.play().catch(err => {
          // 处理浏览器自动播放限制导致的失败
          console.error("播放失败:", err);
        });
      } else {
        targetPlayer.player.pause();
      }
    });
  }, {rootMargin: "0px 0px -200px 0px"});
  document.querySelectorAll('iframe').forEach(iframe => { observer.observe(iframe) });
} else {
  document.querySelector('#warning').style.display = 'block';
}

关键说明 #

• 给players数组中的每个对象新增element属性，用于精准匹配Intersection Observer回调中的目标元素，找到对应的Vimeo播放器实例。
• 调用Vimeo官方API的play()和pause()方法控制播放状态，其中play()需添加catch处理，避免浏览器自动播放限制引发的报错。
• 原有添加show类的逻辑完全保留，不影响样式相关需求。

内容的提问来源于stack exchange，提问作者Julius Goddard