在 React JS Carousel 可重用组件中更改幻灯片时暂停视频？

Question

我有一个可重复使用的 Bootstrap carousel 组件，它可以呈现不同的视频并且运行良好，但是当视频正在播放并且幻灯片切换到下一个或上一个时会出现一个问题，视频不会暂停但它继续播放。我想在更改幻灯片时暂停它，但我真的不知道如何在 React JS 中实现这一点。 我将在我的轮播组件代码下方附上，也许会有所帮助。

附注。如果还有什么我应该在这里添加的，请告诉我。 非常感谢 :)

import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Carousel from 'react-bootstrap/Carousel';
import "../carousel.css";

export default class VideoCarousel extends Component {
  constructor(props) {
    super(props);
  }

  render(){
    return(
      <div>
      <Carousel interval={null}  className="carousel">
          {this.props.items.map((item, index) => {
              return (
                  <Carousel.Item key={index}>
                  <video className="videoItem" controls="controls">
                        <source src={item.src} type="video/mp4"/>
                    </video>
                  <Carousel.Caption>
                    {/* <h2>{item.title}</h2> */}
                  </Carousel.Caption>
                  </Carousel.Item>
              );
          })}
      </Carousel>
      </div>
    )
  }
}