在引导轮播幻灯片更改时暂停视频

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

问题

您对所有项目使用相同的参考。运行 map 函数后 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>
 }
}

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