编辑:已解决
我一整天都被这个问题困扰着,如果有人有想法,将不胜感激!
我正在使用 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>
);
}
}