如何在 Swiper.js 中自动暂停非可视区域的视频-js教程-PHP中文网

如何在 Swiper.js 中自动暂停非可视区域的视频

本文介绍如何利用 Swiper.js 的 slideChange 事件，精准控制轮播中 HTML 元素的播放状态，确保仅当前可见幻灯片中的视频继续播放，其余全部自动暂停，提升性能与用户体验。

本文介绍如何利用 swiper.js 的 `slidechange` 事件，精准控制轮播中 html `

在使用 Swiper.js 构建多媒体轮播时，嵌入 <video></video> 标签虽能增强表现力，但默认行为会导致视频在滑出视口后仍持续播放——不仅浪费带宽和 CPU 资源，还可能干扰用户（如多个音频同时播放）。Swiper 提供了丰富且可靠的生命周期事件，其中 slideChange 是解决该问题的理想切入点：它在滑动完成、活动 Slide 切换后立即触发，此时可安全地对上一幻灯片（已离开可视区）执行清理操作。

以下为完整实现方案，已适配 Swiper 11+（兼容模块化与传统 CDN 引入方式）：

// SWIPER SERVICES START
if (document.body.id === "services") {
  const swiper = new Swiper(".swiper", {
    loop: true,
    speed: 600,
    autoplay: {
      delay: 15000,
      disableOnInteraction: false // 可选：避免用户交互后停止自动播放
    },
    direction: "horizontal",
    pagination: {
      el: ".swiper-pagination",
      clickable: true
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    scrollbar: {
      el: ".swiper-scrollbar",
      draggable: true
    },
    // ? 关键：监听 slideChange 事件
    on: {
      slideChange: function () {
        // 暂停「上一个」幻灯片中的所有视频（即刚移出可视区的 slide）
        const prevSlide = this.slides[this.previousIndex];
        pauseVideosInSlide(prevSlide);

        // 【进阶建议】可选：自动播放当前 slide 的首个 video（如有）
        const currentSlide = this.slides[this.activeIndex];
        const firstVideo = currentSlide.querySelector('video');
        if (firstVideo && firstVideo.hasAttribute('autoplay')) {
          firstVideo.play().catch(e => console.warn("Autoplay prevented:", e));
        }
      }
    }
  });
}

// 工具函数：暂停指定 Slide 内所有 <video> 元素
function pauseVideosInSlide(slide) {
  if (!slide) return;
  const videos = slide.querySelectorAll('video');
  videos.forEach(video => {
    if (!video.paused && !video.ended) {
      video.pause();
      // 可选：重置播放时间以避免下次进入时从中间开始（按需启用）
      // video.currentTime = 0;
    }
  });
}</video>

✅ 关键说明与最佳实践：

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

this.previousIndex 在 slideChange 中始终指向刚刚离开激活状态的幻灯片索引，因此是暂停旧视频的准确目标；
使用 querySelectorAll('video') 确保捕获所有 <video></video>（包括嵌套在 <picture></picture> 或自定义容器内的）；
添加 !video.ended 判断可避免对已结束视频重复调用 pause()（无副作用但更健壮）；
若需支持静音自动播放（如移动端），请确保 <video></video> 含 muted 和 playsinline 属性，并在 autoplay 触发时处理 Promise rejection（现代浏览器策略要求）；
注意：loop: true 模式下，previousIndex 在循环边界处仍有效（Swiper 内部已做映射），无需额外处理。

通过上述方案，你不仅能彻底消除后台视频噪音，还能显著降低页面资源占用。整个逻辑轻量、解耦、可维护，是 Swiper 视频轮播的标准实践。