React 视频播放器开关

Question

我正在用 React 构建一个自定义视频播放器。我需要的是让播放器能够播放 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 函数附加到左右箭头。