如何在react-image-gallery中停止所有react-youtube视频的播放？

Question

编辑：已解决

我一整天都被这个问题困扰着，如果有人有想法，将不胜感激！

我正在使用 react-image-gallery 和 react-youtube 构建一个视频轮播，我的问题是 YouTube 组件会渲染与我拥有的视频数量相同的次数，因此我有多个 'players'（一些可以利用 YouTube 方法（playVideo 等）的对象）。

在下面的代码中，我尝试将每个 player 对象推入数组中，因此 state 中的 player 是这些对象的数组，这似乎很好地工作了（虽然可能有更好的方法）。然后我尝试在 _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>
    );
  }
}

- Jimmy Höglund

---

在 react-image-gallery 的源代码中，它们传递了一个参数 onSlide：https://github.com/xiaolin/react-image-gallery/blob/master/src/ImageGallery.jsx#L170，它是前一个视频的索引，因此您可以跳过迭代以查找它。 您是否尝试修改 _onSlide() 以接受单个参数？这可能是一个好主意，并尝试打印该参数。 - Stefan Theard

@StefanTheard 感谢您的å›�å¤�，ä¸�过我已ç»�解决了（å�ªéœ€è¦�一些食物😉），我将for循ç�¯æ”¹ä¸ºç®­å¤´å‡½æ•°forEach，然å��它就起作用了ï¼�我也å°�试了很多次使用onSlide()事件，虽然æ�¥è¿‘了但是没有æˆ�功。 - Jimmy Höglund

Answer 1

我发布后不久就想明白了。我将for循环更改为箭头函数的forEach，然后它就起作用了！

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

- Jimmy Höglund

---

很酷，这实际上帮助了我解决另一个问题 :) - Marko