reactjs - 如何使用 react-image-gallery 停止幻灯片上的所有 react-youtube 视频？

Question

编辑:已解决

我一整天都被困在这个问题上，如果有人有想法，我将不胜感激!

所以我正在使用 react-image-gallery 和 react-youtube 来构建视频轮播，我的问题是 YouTube 组件的渲染次数与我拥有的视频数量一样多，所以我有多个“播放器” '(某种可以利用 YouTube 方法(播放视频等)的对象)。

我在下面的代码中尝试的是将每个玩家对象放入一个数组中，因此处于状态的玩家是这些对象的数组，这似乎工作正常(虽然可能有更好的方法来做到这一点).然后，我尝试在 _onSlide() 方法中循环遍历此数组，以在我滑动到图库中的下一个视频时停止所有视频，但绝对没有任何反应。

无论如何，我想让当前视频在滑动到下一个视频时停止，这样一次只能播放一个视频。

import React, { Component } from 'react';
import { Card, Header, Modal } from 'semantic-ui-react';
import ImageGallery from 'react-image-gallery';
import YouTube from 'react-youtube';

export default class VideoCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      showPlayButton: true,
      showGalleryPlayButton: false,
      showFullscreenButton: true,
      showGalleryFullscreenButton: false,
      player: []
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this._renderVideo = this._renderVideo.bind(this);
    this._onSlide = this._onSlide.bind(this);
    this._onReady = this._onReady.bind(this);
  }

  _onReady(event) {
    const player = this.state.player;
    player.push(event.target);
    this.setState({
      player: player
    });
  }

  openModal() {
    this.setState({ open: true });
  }

  closeModal() {
    this.setState({ open: false, player: [] });
  }

   _renderVideo(item) {
    const opts = {
      height: '480',
      width: '100%'
    };
    return (
      <div className='image-gallery-image'>
        <div className='video-wrapper'>
          <YouTube videoId={item.embedUrl} opts={opts} onReady={this._onReady}/>
        </div>
      </div>
    );
  }

   _onSlide() {
    //This does nothing
    for (let i = 0; i < this.state.player; i++) {
      console.log(this.state.player[i]);
      this.state.player[i].pauseVideo();  
    }
  }

  render() {
    const { image, header, id, arr, index } = this.props;
    return (
      <div>
        <Card image={image} header={header} onClick={this.openModal}/>
        <Modal size='small' basic open={this.state.open} onClose={this.closeModal} closeIcon='close'>
          <ImageGallery
            items={arr}
            startIndex={index}
            showPlayButton={this.state.showPlayButton && this.state.showGalleryPlayButton}
            showFullscreenButton={this.state.showFullscreenButton && this.state.showGalleryFullscreenButton}
            onSlide={this._onSlide}
            infinite={false}
            renderItem={this._renderVideo}
          />
        </Modal>
      </div>
    );
  }
}

Answer 1

在我发布后不久我就弄明白了。我将 for 循环更改为箭头函数 forEach，它成功了!

onSlide() {
  this.state.player.forEach((player) => {
    player.pauseVideo();
  });
}