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功能附加到左右箭头。

反应视频播放器开关

1 个答案: