多卡片独立Hover视频播放功能故障排查与优化问询

核心问题是之前的逻辑把定时器、视频元素这类状态共享了，导致所有卡片互相干扰。要解决就得给每个卡片单独维护专属状态，同时实现自动绑定逻辑，新增卡片不用手动调用函数。

1. 用类封装独立状态 #

把每个卡片的悬停逻辑、定时器、视频元素都封装到类里，每个卡片实例拥有自己的专属状态，完全隔离：

class CardVideoHover {
  constructor(cardElement) {
    this.card = cardElement;
    this.video = this.card.querySelector('video'); // 可根据实际视频选择器调整
    this.hoverTimer = null;
    
    this.bindEvents();
  }

  bindEvents() {
    // 鼠标进入：启动5秒定时器
    this.card.addEventListener('mouseenter', () => {
      this.hoverTimer = setTimeout(() => {
        this.video.currentTime = 0; // 重置到视频开头
        this.video.play();
      }, 5000);
    });

    // 鼠标离开：清除定时器，暂停视频
    this.card.addEventListener('mouseleave', () => {
      clearTimeout(this.hoverTimer);
      this.video.pause();
    });
  }
}

2. 自动初始化+监听新增卡片 #

不用手动给每个卡片调用初始化函数，直接批量处理现有卡片，再用MutationObserver监听DOM变化，自动给新增卡片绑定逻辑：

// 初始化页面现有卡片
function initCardHoverEffects() {
  document.querySelectorAll('[data-card-video]').forEach(card => {
    new CardVideoHover(card);
  });
}

// 监听DOM新增卡片，自动绑定逻辑
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // 处理直接新增的卡片
      if (node.nodeType === 1 && node.hasAttribute('data-card-video')) {
        new CardVideoHover(node);
      }
      // 处理新增容器里的子卡片
      if (node.nodeType === 1) {
        node.querySelectorAll('[data-card-video]').forEach(card => {
          new CardVideoHover(card);
        });
      }
    });
  });
});

// 启动监听，目标节点替换成你的卡片容器ID
observer.observe(document.getElementById('card-container'), {
  childList: true,
  subtree: true
});

// 页面加载完成后初始化现有卡片
document.addEventListener('DOMContentLoaded', initCardHoverEffects);

3. 卡片HTML结构要求 #

给每个卡片加上data-card-video属性，方便选择器识别：

<div id="card-container">
  <div id="card-1" data-card-video>
    <video src="video1.mp4" muted loop></video>
    <!-- 卡片其他内容 -->
  </div>
  <div id="card-2" data-card-video>
    <video src="video2.mp4" muted loop></video>
    <!-- 卡片其他内容 -->
  </div>
</div>

关键说明 #

• 每个CardVideoHover实例单独维护定时器和视频元素，彻底解决状态共享问题，每次hover都会重置视频到开头再播放。
• MutationObserver会自动监测卡片容器内新增的卡片，不用手动调用初始化函数，完全支持后续扩展。
• 如果你的视频选择器不是video，自行调整类里的querySelector参数即可。

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