如何使用 react-image-gallery 停止所有 react-youtube 视频 onSlide？

Posted 2023-02-25

【中文标题】如何使用 react-image-gallery 停止所有 react-youtube 视频 onSlide？

【英文标题】：How to stop all react-youtube videos onSlide with react-image-gallery?

【发布时间】：2017-05-11 20:09:49

【问题描述】：

编辑：已解决

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

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

我在下面的代码中尝试将每个播放器对象推入一个数组，因此状态中的播放器是这些对象的数组，这似乎工作正常（虽然可能有更好的方法来做到这一点）。然后，我尝试在_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>
    );
  

【问题讨论】：

在 react-image-gallery 源中，他们传递了 onSlide 一个参数：github.com/xiaolin/react-image-gallery/blob/master/src/… 这是上一个视频的索引，因此您可以跳过迭代来查找它。您是否尝试过将 _onSlide() 修改为采用单个参数？这样做并尝试打印参数可能是个好主意。

@StefanTheard 感谢您的回复，不过我现在已经解决了（只需要一些食物；）），我将 for 循环切换为箭头函数 forEach 并且它起作用了！我也尝试了很多来自 onSlide() 的事件，接近但没有使用该方法的雪茄。

【参考方案1】：

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

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

【讨论】：

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