我正在尝试让频道中的下一个视频紧随另一个播放。当前,该网站上有一个视频显示一个接一个,但我的目标是显示一个视频,第二个视频紧接另一个播放。我已经为视频结尾设置了功能,但是现在它只会引起警报。我正在使用Youtube Data API提取视频及其信息。
以下是我正在使用的代码的片段:
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!');
}
答案 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}
/>
);
}