swiperjs＆＃x2B; React：当幻灯片不再活跃时，如何停止在幻灯片中停止视频？

Question

我正在尝试拥有一个不同视频的Swiperjs画廊。开箱即用，所有视频都在您滑动时不断互相播放。当Swiper进入下一个幻灯片时，我想停止当前视频。有什么想法吗？

奖励积分：我还想更新一个Usestate，以成为视频的当前标题。这些视频被组织成一个阵列，然后映射到。

这是我当前的代码：

import { Navigation, Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/pagination'
import { useState } from 'react'

const slides = [
  {
    videoPath: '/img/case-studies/snacklins/tiktoks/SNACKLINS_TikTok_HotGirlShit',
    title: 'Hot Girl Shit',
  },
  {
    videoPath: '/img/case-studies/snacklins/tiktoks/SNACKLINS_TikTok_HowBizarre',
    title: 'How Bizarre',
  },
  {
    videoPath: '/img/case-studies/snacklins/tiktoks/SNACKLINS_TikTok_NobleQuest',
    title: 'Noble Quest',
  },
]

function CaseStudies_TikTok() {
  const [activeTitle, setActiveTitle] = useState('')

  function SetSlide({ slide }) {
    return (
      <video
        controls
        muted={false}
        className={'h-full w-auto border-6 border-cream rounded-lg hover:cursor-grab'}
      >
        <source src={`${slide.videoPath}.webm`} type='video/webm' />
        <source src={`${slide.videoPath}.mp4`} type='video/mp4' />
      </video>
    )
  }

  const Carousel = () => {
    return (
      <Swiper
        spaceBetween={20}
        slidesPerView={1.25}
        loop
        navigation={{
          nextEl: '.carousel-button-next',
          prevEl: '.carousel-button-prev',
        }}
        pagination={{
          clickable: true,
          el: '.carousel-pagination',
          type: 'fraction',
        }}
        modules={[Navigation, Pagination]}
      >
        {slides.map((slide, index) => {
          return (
            <SwiperSlide key={index}>
                <SetSlide slide={slide} />
            </SwiperSlide>
          )
        })}
      </Swiper>
    )
  }
  return (
      <>
          <Carousel />
          <div className='flex flex-row justify-around text-cream mt-4 text-lg'>
          <button className='carousel-button-prev'>prev</button>
          <div className='text-center carousel-pagination font-italic'></div>
          <button className='carousel-button-next'>next</button>
          </div>
      </>
  )
}
export default CaseStudies_TikTok