javascript - 如何让使用 React 制作的轮播上的视频停止自动播放？

Question

我对 React 和 JavaScript 完全陌生。
我正在制作一个显示图像和视频的媒体轮播。
我有一个自动滚动功能，幻灯片每 5 秒更改一次。问题是，我需要它不能处理视频。我需要轮播来完全播放视频，然后在播放完后转到下一张幻灯片。
我一直在绞尽脑汁，但我就是不知道该怎么做。
如果有人帮助我，我将非常感激。
这是代码：

import { SliderData } from './SliderData'
import {FaArrowAltCircleRight, FaArrowAltCircleLeft } from 'react-icons/fa'

const ImageSlider = ({slides}) => {
  //Initiating Variables for index values and length of carousel 
  const [current, setCurrent] = useState(0);
  const length = slides.length

  const autoPlayRef = useRef()
  
  //Defining expression to loop carousel
  const nxt = () => {
    setCurrent(current === length-1 ? 0 : current+1)
  }
  const prv = () => {
    setCurrent(current === 0 ? length-1 : current-1)
  }

  //Defining a React hook for autoplay feature
  useEffect(() => {
    autoPlayRef.current = nxt;
  })
  useEffect(() => {
    const runn = () => {
      autoPlayRef.current()
    }
    const interval = setInterval(runn, 5000)
  }, [])

  //setting up a break case for when no items exist
  if (!Array.isArray(slides) || slides.length <=0) {
    return null;
  }

  return (
    <section className="slider">
      <FaArrowAltCircleLeft className="left-arrow" onClick={prv}/>
      <FaArrowAltCircleRight className="right-arrow" onClick={nxt}/>
      {SliderData.map((slide, index) => {
        return (
          <div className={index === current ? 'slide active' : 'slide'} key={index}>
            {index === current && ( SliderData[current].type === 2 ? (
              <video autoPlay muted className="vid">
                <source src={slide.image} type="video/mp4" />
              </video>
            ) : <img src={slide.image} alt="wallpaper" className="image"/>
            )}
          </div>
        );
      })}
    </section>
  );
};

// ImageSlider.defualtProps = {
//   slids: [],
//   autoPlay: null
// }

export default ImageSlider

这是 SliderData 组件中的内容：

export const SliderData = [
    {
        image: '/1.jpg',
        type: 1 
    },
    {
        image: '/2.jpg',
        type: 1
    },
    {
        image: '/3.mp4',
        type: 2
    },
    {
        image: '/5.jpg',
        type: 1
    }
];

标签： javascriptreactjs