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

Question

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

PS。如果我应该在这里添加其他内容，请告诉我。提前谢谢了 ：）

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>
    )
  }
}

标签： reactjsvideocarousel