点击Swiper next/prev按钮时Brightcove播放器视频静音失效问题

• 核心问题1：DOM ID重复违反规范：两个轮播slide内的Brightcove播放器使用了完全相同的idoverlayVideo，HTML标准中id为全局唯一标识，videojs.getPlayer("overlayVideo")永远只会匹配到DOM中第一个出现的同id元素，第二个slide内的播放器实例完全无法被获取。
• 核心问题2：事件触发时序冲突：手动给前后切换按钮绑定jQuery click事件的方式，和Swiper内置的导航切换逻辑存在执行顺序不稳定的问题。点击下一张按钮时Swiper自身的slide切换逻辑先触发，DOM结构更新后原有获取播放器的逻辑就会出现匹配异常，只有点击上一张时时序刚好对齐，才会表现为静音逻辑生效。
• 额外隐患：每个slide内都重复引入了一次Brightcove播放器脚本，重复加载会打乱播放器实例的注册流程，进一步提升异常出现的概率。

1. 修正DOM结构问题 #

将两个播放器的id改为全局唯一值，同时把Brightcove播放器脚本移到公共位置全局引入一次即可，不需要在每个slide内重复加载。
修正后的DOM结构参考：

<!-- 全局只引入一次Brightcove播放器脚本，放在页面公共加载区域 -->
<script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <video-js
        id="overlayVideo1"
        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"
        autoplay
        muted loop
        playsinline
      >
      </video-js>
    </div>
    <div class="swiper-slide">
      <video-js
        id="overlayVideo2"
        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"
        autoplay
        muted loop
        playsinline
      >
      </video-js>
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

2. 替换事件绑定逻辑 #

放弃手动给导航按钮绑定click事件的方案，直接使用Swiper官方提供的slideChange回调监听切换动作，所有触发轮播切换的操作（点击前后按钮、点击分页器、自动轮播）都会触发该回调，从根源避免时序问题。回调中直接遍历所有已初始化的Brightcove播放器实例统一设置静音即可，不需要单独获取某一个id的播放器。
修正后的JS逻辑参考：

$(document).ready(function () {
  // 等所有Brightcove播放器初始化完成后再初始化Swiper
  videojs.ready(function() {
    const 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",
      },
      on: {
        // 轮播切换完成后触发
        slideChange: function() {
          // 遍历所有播放器实例统一设置静音
          Object.values(videojs.getPlayers()).forEach(player => {
            player.muted(true);
            // 可选性能优化：非激活slide的视频暂停，激活slide的视频自动播放
            // const currentSlide = player.el().closest('.swiper-slide');
            // if (!currentSlide.classList.contains('swiper-slide-active')) {
            //   player.pause();
            // } else {
            //   player.play();
            // }
          });
        }
      }
    });
  })
});

修改后无论通过什么方式触发轮播切换，所有Brightcove播放器都会被自动设置为静音，不会再出现点击下一张按钮静音失效的问题。

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