更改幻灯片时停止播放视频答案

【问题标题】：Stop playing video when slide is changed更改幻灯片时停止播放视频
【发布时间】：2022-09-30 15:50:58
【问题描述】：

我使用 React-Player 和 Swiper.js 制作了一个视频轮播。我想在幻灯片更改时停止视频。

更新：我从 Swiper.js 找到了一个 isActive 道具。它会在我最初想要的不活动时停止视频。但是现在它也会在幻灯片变为我不想的活动时自动播放。如何停止自动播放？我很感激任何建议。

const [isPlaying, setIsPlaying] = useState(false)
  
  <Swiper
      slidesPerView={1.5}
      grabCursor={false}
      loop={false}
      watchSlidesProgress={true}
      modules={[Pagination, Navigation]}
  >
  <SwiperSlide>
   {({ isActive }) => (
          <ReactPlayer
              url=\'https://www.youtube.com/watch?v=11111\'
              controls={true}
              playing={isActive || setIsPlaying(false)}
              config={{
                  youtube: {
                      playerVars: { showinfo: 1 },
                  },
              }}
                    />
     )}
  </SwiperSlide>
 <SwiperSlide>
   {({ isActive }) => (
          <ReactPlayer
              url=\'https://www.youtube.com/watch?v=11111\'
              controls={true}
              playing={isActive || setIsPlaying(false)}
              config={{
                  youtube: {
                      playerVars: { showinfo: 1 },
                  },
              }}
                    />
     )}
  </SwiperSlide>

我也尝试过使用onSlideChange，但这也不起作用。

<Swiper
      onSlideChange={() => {setIsPlaying(false)}}
      watchSlidesProgress={true}
      modules={[Pagination, Navigation]}
      className=\'mySwiper\'
                     >
      <SwiperSlide>
       <div className=\'player-wrapper\'>
            <ReactPlayer url=\'https://www.youtube.com/watch?v=1111\'
                 controls={true}
                 playing={isPlaying} />
       </div>
      </SwiperSlide>   
      <SwiperSlide>
       <div className=\'player-wrapper\'>
            <ReactPlayer url=\'https://www.youtube.com/watch?v=1111\'
                 controls={true}
                 playing={isPlaying} />
       </div>
      </SwiperSlide>

标签： reactjs react-hooks carousel swiper.js react-player

【解决方案1】：

仅当 activeIndex 等于键时才播放视频

       <ReactPlayer
        id="VideoPlayer"
        url={someurl}
        className='react-player'
        playing={activePlay !== key ? false : true}
       >

而对于 swiper 滑块，将当前幻灯片的键设置为键。

 <Swiper
  onSlideChange={(swiper) => {
    if (swiper.isEnd) {
    }

    if (projectData[swiper.realIndex].type === "video") {
        setActivePlay(swiper.realIndex);
    } else {
        setActivePlay(-1);
    }
}}

【讨论】：