在引导程序转盘幻灯片更改上暂停视频

Question

我有一组视频，它们由嵌入在模式对话框中的Bootstrap转盘显示。当模式显示时，视频不会自动开始播放，但你需要点击它，它就会开始播放。我的问题是，在幻灯片更改时，当前播放的视频不会暂停。所以这就是我需要实现的，当用户改变幻灯片(前后(时暂停当前视频。我该怎么做？顺便说一句，我正在使用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);
this.videoRef = React.createRef();
// this.state = {
//   index: 0,
//   isPlaying: false
// }
}
render(){
return(
<div>
<Carousel activeIndex={this.index} onSelect={this.handleChange} interval={null}  className="carousel">
{this.props.items.map((item, index) => {
return (
<Carousel.Item key={index}>
<video 
ref = {this.videoRef} 
className="videoItem" 
controls="controls"
>
<source src={item.src} type="video/mp4"/>
</video>
<Carousel.Caption>
{/* <h2>{item.title}</h2> */}
</Carousel.Caption>
</Carousel.Item>
);
})}
</Carousel>
</div>
)
}
}

Answer 1

问题

您对所有项目使用相同的引用。运行映射函数后，this.videoRef将等于数组的最后一个元素。

解决方案1：将引用保留在一个数组中

创建由空数组初始化的ref：

this.videoRef = React.createRef([]);

对元素进行迭代，并根据索引值分配引用：

<Carousel activeIndex={this.index} onSelect={this.handleChange} interval={null}  className="carousel">
{this.props.items.map((item, index) => {
return (
<Carousel.Item key={index}>
<video 
ref = {el => this.videoRef.current[index] = el} 
...
>
... 
</Carousel.Item>)
})}
</Carousel>

要暂停视频，请使用特定位置的元素参考：

this.videoRef.current[index].pause();

解决方案2：为转盘项目创建一个组件

您可以处理componentDidMount/componentWillUnmount 上的控制功能

this.videoRef = React.createRef(null);

分配参考：

export default class VideoCarouselItem extends Component {
constructor(props) {
super(props);
this.videoRef = React.createRef();
}
render(){
<Carousel.Item key={this.props.key}>
<video 
ref = {this.videoRef} 
...
>             
</Carousel.Item>
}
}

然后通过属性传递您需要的信息。