反应视频播放器开关

Question

我正在建立一个自定义视频播放器的反应。我需要的是玩家能够播放5个不同的视频，这将开始通过点击右(或左)箭头和循环。有点像一个旋转木马，一次只能看到一个视频。

我正在探索一款反应视频播放器-- http://www.reactexamples.com/react-html5-video/，但我不知道在这里面是否有可能，或者我是否需要以某种方式构建它。以前有人做过吗?或者可能用过不同的播放器？

Answer 1

是啊，看来你可以用那个包裹做点什么。看起来您可以这样指定视频src：

<Video controls autoPlay loop muted ref="video">
   <source src={videos[this.state.videoId]} type="video/mp4" />
   <Overlay />
   <Controls />
</Video>

您需要创建一个视频列表，并在列表中循环以切换视频。通过他们的方法，他们创建了一系列视频：

constructor(){
    super();
    this.videos = ['http://test.src/video.mp4','http://test2.src/video.mp4'];
    this.state = {
        videoId: 0
    }
}
nextVideo(){
    let id;
    if(this.state.videoId === this.videos.length - 1){
        //Loop back to first video
        id = 0;
    }else{
        id = this.state.videoId + 1;
    }
    this.setState({
        videoId: id
    });
}
prevVideo(){
    let id;
    if(this.state.videoId === 0){
        //Loop back to last video
        id = this.videos.length - 1;
    }else{
        id = this.state.videoId - 1;
    }
    this.setState({
        videoId: id
    });
}
render(){
    return (
        <Video controls autoPlay loop muted ref="video">
            <source src={this.videos[this.state.videoId]} type="video/mp4" />
            <Overlay />
            <Controls />
        </Video>
    )
}

然后，需要将nextVideo和prevVideo函数附加到左箭头和右箭头。