如何修改JavaScript代码实现页面所有动态加载视频鼠标悬停播放

数据老陈

2026-9-29

多视频（含动态加载）悬停预览适配方案

核心修改点

原代码仅通过querySelector选中页面第一个视频，且启停函数硬绑定了全局的单个视频变量
原全局定时器变量会导致多视频触发时互相覆盖冲突
采用事件委托方案适配后续动态插入的视频，不需要每次新增视频后重新绑定事件

完整修改后代码

// 预览启动函数，接收目标视频作为参数
function startPreview(video) {
  video.muted = true;
  video.currentTime = 5;
  video.playbackRate = 2.5;
  video.play();
}

// 预览停止函数，接收目标视频作为参数
function stopPreview(video) {
  video.currentTime = 5;
  video.playbackRate = 1;
  video.pause();
}

// 事件委托绑定到document，覆盖所有现有和未来新增的video元素
document.addEventListener("mouseenter", (e) => {
  // 判定触发事件的元素是否是视频
  if (e.target.tagName === "VIDEO") {
    const video = e.target;
    startPreview(video);
    // 把定时器存在当前视频的自定义属性上，避免全局变量冲突
    video.dataset.previewTimeout = setTimeout(() => {
      stopPreview(video);
    }, 3000);
  }
}, true); // 捕获阶段触发，匹配mouseenter事件不冒泡的特性

document.addEventListener("mouseleave", (e) => {
  if (e.target.tagName === "VIDEO") {
    const video = e.target;
    clearTimeout(video.dataset.previewTimeout);
    delete video.dataset.previewTimeout;
    stopPreview(video);
  }
}, true);