从Youtube API切换到下一个视频(反应式)

时间:2019-01-21 04:00:57

标签: javascript reactjs api youtube youtube-api

我正在尝试让频道中的下一个视频紧随另一个播放。当前,该网站上有一个视频显示一个接一个,但我的目标是显示一个视频,第二个视频紧接另一个播放。我已经为视频结尾设置了功能,但是现在它只会引起警报。我正在使用Youtube Data API提取视频及其信息。

Current View of React App

以下是我正在使用的代码的片段:

constructor() {
super();
this.state = {
  videos: [],
};

}

  componentDidMount() {
fetch('https://www.googleapis.com/youtube/v3/search?key='APIKey'&channelId=UCXIJgqnII2ZOINSWNOGFThA&part=snippet,id&order=date&maxResults=2')
.then(results => {
  return results.json();
}).then(data => {
  let videos = data.items.map((videos) => {
    return(
      <div key={videos.items}>
      <YouTube
              className="player"
              id="video"
              videoId={videos.id.videoId}
              opts={VIDEO_OPTS}
              onEnd={this.playNextVideo}
            />
      <h2>{videos.snippet.title}</h2>
      <p className="channel">Video by: {videos.snippet.channelTitle}</p>
      </div>
    );
  });
  this.setState({videos: videos});
  console.log("state", this.state.videos);
})

  }

  playNextVideo = () => {
    alert('The video is done!');
  }

1 个答案:

答案 0 :(得分:0)

我建议您做一些与众不同的事情。

首先将results.json();保存到您的状态而不是整个youtube组件的视频变量中,这是不好的做法。

第二次在您的状态下保存另一个变量,该变量指示当前的播放视频ID(playingVideoId)。在componentDidMount中初始化它,然后在playNextVideo函数中更改它,如下所示:

constructor() {
    super();
    this.index=0;    
}        

componentDidMount() {
        fetch('https://www.googleapis.com/youtube/v3/search?key='APIKey'&channelId=UCXIJgqnII2ZOINSWNOGFThA&part=snippet,id&order=date&maxResults=2').then(results => {
          this.setState({videos: results.json()});
          this.setState({playingVideoId: this.state.videos[this.index]});
        })}

playNextVideo = () => {
              this.setState({playingVideoId: this.state.videos[++this.index]});         
          }

现在使用render函数来渲染组件

render() {
    return(
          <YouTube
                  className="player"
                  id="video"
                  videoId={this.state.playingVideoId}
                  opts={VIDEO_OPTS}
                  onEnd={this.playNextVideo}
            />
        );
}