如何解决在 React JS Carousel 可重用组件中更改幻灯片时暂停视频?
我有一个可重复使用的 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>
)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。