反応イメージギャラリーですべての反応YouTube動画を停止するには？

Question

編集：私は一日中、このいずれかに立ち往生してきたし、誰かがアイデアを持っている場合、それは非常に高く評価されるだろう

を解決しよう！

私は反応イメージギャラリーとリアクションyoutubeを使用してビデオカルーセルを構築していますが、私の問題はYouTubeコンポーネントが自分が所有している動画の数だけ何度もレンダリングしていることです。プレイヤー '（YouTubeのメソッド（playVideoなど）を利用できる種類のオブジェクト）

私が下のコードで試したことは、すべてのプレーヤーオブジェクトを配列にプッシュすることです。状態のプレーヤーはこれらのオブジェクトの配列であり、うまくいくようです（おそらくもっと良い方法がありますしかし）。私はその後、ギャラリーの次のビデオにスライドするときにすべてのビデオを停止するには_onSlide()の方法でこの配列をループしようとしましたが、絶対に何も起こっていません。

とにかく、一度に1つのビデオだけを再生できるように、次のビデオにスライドすると、現在のビデオが停止します。

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-loopをforEachの矢印関数に変更しました。 https://github.com/xiaolin/react-image-gallery/blob/master/src/ImageGallery.jsx#L170 こと：彼らはonSlideパラメータを渡す反応像ギャラリー源で

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