Swiper滑块与视频联动自动轮播循环后异常问题求助

问题根源分析 #

你的代码存在几个核心问题，导致轮播循环后播放器异常：

• 强制重置所有视频进度：slideChange事件里循环把所有视频currentTime设为0，不管视频是暂停还是播放结束，直接破坏了暂停后保留进度的需求。
• 事件绑定方式错误：直接监听.vjs-tech的事件，没有使用Brightcove官方的Player API，轮播循环后播放器实例可能重新初始化，导致原有事件监听失效。
• 状态未持久化：没有记录每个视频的播放状态（暂停/已结束），无法判断返回时是继续播放还是从头开始。

修复方案与完整代码 #

下面是调整后的代码，采用Brightcove官方API管理播放器，同时持久化视频状态：

HTML部分（保持结构不变，移除每个slide内的script标签，统一放在底部） #

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <video-js
        id="6304418462001"
        class="overlayVideo"
        data-account="6269594386001"
        data-player="oHG2GzKTGk"
        data-embed="default"
        controls=""
        data-video-id="6304418462001"
        data-playlist-id=""
        data-application-id=""
        data-object-fit="cover"
        muted
        playsinline
      >
      </video-js>
    </div>
    <div class="swiper-slide">
      <video-js
        id="4029697544001"
        class="overlayVideo"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        controls=""
        data-video-id="4029697544001"
        data-playlist-id=""
        data-application-id=""
        muted
        playsinline
      ></video-js>
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

<!-- 统一引入Brightcove脚本 -->
<script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

JavaScript部分 #

$(document).ready(function () {
  // 初始化Swiper
  var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    loop: true // 如果开启循环，确保索引处理正确
  });

  // 存储所有Brightcove播放器实例和状态
  var videoPlayers = [];
  var videoStates = {}; // key: videoId, value: { ended: boolean, currentTime: number }

  // 初始化每个视频播放器
  $(".overlayVideo").each(function() {
    var videoId = $(this).attr("id");
    videojs.getPlayer(videoId).ready(function() {
      var player = this;
      videoPlayers.push(player);
      // 初始化状态
      videoStates[videoId] = { ended: false, currentTime: 0 };

      // 监听播放事件：暂停轮播
      player.on("play", function() {
        swiper.autoplay.stop();
      });

      // 监听暂停事件：恢复轮播
      player.on("pause", function() {
        // 保存当前进度
        videoStates[videoId].currentTime = player.currentTime();
        swiper.autoplay.start();
      });

      // 监听播放结束事件：恢复轮播，标记状态为已结束
      player.on("ended", function() {
        videoStates[videoId].ended = true;
        videoStates[videoId].currentTime = 0;
        swiper.autoplay.start();
      });
    });
  });

  // 轮播切换事件处理
  swiper.on("slideChange", function() {
    // 获取当前和上一个slide的索引（处理loop模式下的索引偏移）
    var currentSlideIndex = this.realIndex;
    var prevSlideIndex = this.previousIndex >= 0 ? this.previousIndex : (this.slides.length - 1);

    // 获取对应slide的视频元素和播放器
    var prevVideoEl = $(this.slides[prevSlideIndex]).find(".overlayVideo");
    var currentVideoEl = $(this.slides[currentSlideIndex]).find(".overlayVideo");

    if (prevVideoEl.length) {
      var prevPlayer = videojs.getPlayer(prevVideoEl.attr("id"));
      if (prevPlayer) {
        prevPlayer.pause();
      }
    }

    if (currentVideoEl.length) {
      var currentVideoId = currentVideoEl.attr("id");
      var currentPlayer = videojs.getPlayer(currentVideoId);
      var state = videoStates[currentVideoId];

      if (currentPlayer) {
        if (state.ended) {
          // 视频已播放结束，从头开始
          currentPlayer.currentTime(0);
          currentPlayer.play();
          state.ended = false; // 重置结束状态
        } else {
          // 视频未结束，从上次暂停位置继续播放
          currentPlayer.currentTime(state.currentTime);
          currentPlayer.play();
        }
      }
    }
  });
});

关键修复点说明 #

1. 使用Brightcove官方API：通过videojs.getPlayer()获取播放器实例，监听官方事件，避免直接操作DOM元素导致的循环失效问题。
2. 持久化视频状态：用videoStates对象记录每个视频的播放结束状态和暂停时的进度，返回时根据状态决定播放行为。
3. 优化轮播切换逻辑：不再强制重置所有视频，仅处理当前和上一个视频，适配Swiper的loop模式索引。
4. 统一脚本引入：把Brightcove的脚本移到底部统一加载，避免每个slide内重复加载导致的实例冲突。

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