SwiperJS+NextJS混合内容轮播开loop时react-youtube出现双重音问题

方案1：通过Swiper事件+react-youtube实例控制（最稳定） #

核心逻辑是利用Swiper提供的真实索引realIndex，仅允许当前激活的原slide内的视频播放，其余所有视频统一停止：

import { useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import YouTube from 'react-youtube';
import 'swiper/css';

// 你的轮播内容数据
const carouselItems = [
  { type: 'image', url: '/demo.jpg' },
  { type: 'video', youtubeId: 'dQw4w9WgXcQ' },
  // 其他内容项
]

export default function MainCarousel() {
  // 存储所有原slide对应的youtube播放器实例
  const youtubeRefs = useRef(new Map());
  const swiperRef = useRef(null);

  const stopInactiveVideos = () => {
    if (!swiperRef.current) return;
    const swiper = swiperRef.current.swiper;
    // 获取当前激活的原slide索引（排除克隆slide的干扰）
    const activeRealIndex = swiper.realIndex;
    // 遍历所有播放器，非当前激活的全部停止
    youtubeRefs.current.forEach((player, index) => {
      if (index !== activeRealIndex) {
        player?.stopVideo?.();
      }
    })
  }

  return (
    <Swiper
      ref={swiperRef}
      loop={true}
      onSlideChange={stopInactiveVideos}
      onTransitionEnd={stopInactiveVideos}
      {/* 保留你原有其他Swiper配置 */}
    >
      {carouselItems.map((item, index) => (
        <SwiperSlide key={index}>
          {item.type === 'image' ? (
            <img src={item.url} alt="轮播图" />
          ) : (
            <YouTube
              videoId={item.youtubeId}
              onReady={(e) => youtubeRefs.current.set(index, e.target)}
              onPlay={stopInactiveVideos}
              {/* 保留你原有其他youtube配置 */}
            />
          )}
        </SwiperSlide>
      ))}
    </Swiper>
  )
}

方案2：修复DOM操作方案 #

你之前的代码不生效的原因是固定取索引1的iframe，而Loop模式下克隆slide的位置会随轮播滚动动态变化，修改后代码如下：

const stopDuplicateVideos = () => {
  if (typeof document === 'undefined') return; // 适配NextJS服务端渲染逻辑
  // 选中所有克隆slide内的iframe统一处理
  const duplicateIframes = document.querySelectorAll('.swiper-slide-duplicate iframe');
  duplicateIframes.forEach(iframe => {
    if (iframe.contentWindow) {
      iframe.contentWindow.postMessage(
        JSON.stringify({ event: 'command', func: 'stopVideo' }), 
        '*'
      );
    }
  })
}

将该函数放在Swiper的onInit、onSlideChange、onTransitionEnd回调中执行即可。

可选优化 #

如果不需要克隆slide内显示视频内容，可以直接加CSS隐藏克隆slide内的视频容器，从根源避免触发播放：

/* 替换为你自己的视频容器类名 */
.swiper-slide-duplicate .youtube-wrapper {
  display: none;
}

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