Smart Slider 3背景视频自动播放问题：如何禁用自动播放仅在鼠标悬停时播放

开发者阿泽

2026-4-15

嘿，我太懂你现在的头疼点了——用Smart Slider 3做的背景MP4视频，明明只想让它在鼠标悬停时才动，试了上百个div的JS代码都没搞定，属实磨人。刚好我对这个插件的视频逻辑有点熟，给你一套能解决问题的方案：

首先得先揪出插件里在搞鬼的关键属性——你视频标签里的data-keepplaying="1"，这是Smart Slider 3用来强制视频持续播放的核心开关，插件会靠这个自动触发播放，不拿掉它，你的JS代码根本干不过插件自带的逻辑。

接下来直接上可用的代码，我给你写好了每一步的作用：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有Smart Slider的背景视频元素
  const bgVideos = document.querySelectorAll('.n2-ss-slide-background-video');
  
  bgVideos.forEach(video => {
    // 移除插件强制播放的属性，断了它自动播放的根
    video.removeAttribute('data-keepplaying');
    // 页面加载完成后直接暂停，确保初始状态视频是静止的
    video.pause();
    
    // 鼠标悬停时触发播放，加catch处理可能的浏览器播放权限问题
    video.addEventListener('mouseenter', function() {
      this.play().catch(err => {
        console.log('视频播放失败:', err);
      });
    });
    
    // 鼠标离开时立刻暂停
    video.addEventListener('mouseleave', function() {
      this.pause();
    });
    
    // 用捕获阶段提前拦截插件内部的自动播放触发
    video.addEventListener('play', function(e) {
      // 只有鼠标真的悬停在视频上时，才允许播放，彻底堵死自动播放
      if(!this.matches(':hover')) {
        e.preventDefault();
        this.pause();
      }
    }, true);
  });
});

给你拆解下这段代码的关键细节：

DOMContentLoaded：等页面所有元素都加载完再执行，避免找不到视频标签的情况
移除data-keepplaying：直接掐断插件强制播放的源头，这是最关键的一步
鼠标事件监听：逻辑简单直白，鼠标进来播、离开停，加catch是怕浏览器的自动播放政策搞小插曲（虽然你视频是静音的，但保险起见）
play事件拦截：用捕获阶段提前截胡插件可能偷偷触发的播放命令，只有当鼠标真的悬停时才放行，彻底封死自动播放的路子

最后给你两个小提示：

把这段代码放到你网站的自定义JS区域就行，比如WordPress的「外观-自定义-额外JS」里，或者Smart Slider 3自带的自定义JS面板中
你已经给视频设了preload="none"，这个非常棒，既省带宽又不会触发不必要的加载逻辑

备注：内容来源于stack exchange，提问作者Uluç Börekçi