切换轮播时暂停其他视频（Swiper.js + React Player）

问题核心 #

你当前的问题出在全局共享的isPlaying状态和错误的幻灯片切换逻辑上：

• 所有视频绑定同一个isPlaying，切换时设为false，但初始化或某些场景下ReactPlayer可能触发自动播放
• onSlideChange中的判断swiper.activeIndex !== videodata.id完全错误，videodata是数组，没有id属性，无法正确匹配当前幻灯片

修复步骤 #

1. 改用单视频独立播放状态
   放弃全局布尔值，用对象存储每个视频ID对应的播放状态，确保每个视频的播放状态独立可控。

2. 修正幻灯片切换逻辑
   切换幻灯片时，仅暂停非活跃幻灯片的视频，不主动启动活跃视频（满足autoplay=false的需求）。

3. 绑定ReactPlayer的播放/暂停事件
   手动控制每个视频的播放状态，避免组件自动触发播放。

修改后的代码示例 #

import { useState, useEffect } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import ReactPlayer from 'react-player';
import 'swiper/css';

const videodata = [
  { id: 0, name: 'video1', url: 'https://www.youtube.com/1234' },
  { id: 1, name: 'video2', url: 'https://www.youtube.com/5678' },
];

const VideoCarousel = () => {
  // 用对象存储每个视频的播放状态，key为视频id
  const [playingStates, setPlayingStates] = useState({});

  // 初始化所有视频的播放状态为false
  useEffect(() => {
    const initialStates = videodata.reduce((acc, video) => {
      acc[video.id] = false;
      return acc;
    }, {});
    setPlayingStates(initialStates);
  }, []);

  return (
    <Swiper
      onSlideChange={(swiper) => {
        const activeVideoId = videodata[swiper.activeIndex].id;
        // 切换时暂停所有非活跃视频
        setPlayingStates(prev => {
          const updatedStates = {...prev};
          Object.keys(updatedStates).forEach(id => {
            if (parseInt(id) !== activeVideoId) {
              updatedStates[id] = false;
            }
          });
          return updatedStates;
        });
      }}
      autoplay={false}
      watchSlidesProgress={true}
    >
      {videodata.map((data) => (
        <SwiperSlide key={data.id}>
          <ReactPlayer
            url={data.url}
            controls={true}
            // 绑定当前视频的播放状态
            playing={playingStates[data.id] || false}
            // 用户手动播放时更新状态
            onPlay={() => setPlayingStates(prev => ({...prev, [data.id]: true}))}
            // 用户手动暂停时更新状态
            onPause={() => setPlayingStates(prev => ({...prev, [data.id]: false}))}
          />
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default VideoCarousel;

关键说明 #

• 每个视频的播放状态独立存储，避免全局状态导致的误触发
• 幻灯片切换时仅暂停非活跃视频，不会主动启动当前视频，完全符合autoplay=false的要求
• 通过onPlay/onPause绑定用户操作，确保只有用户手动触发时才会播放/暂停

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