CODEWITHSUNDEEP
reactjshtml5-video
Max T
Max T

Reputation: 1455

React video player switch

I'm building a custom video player in React. What I need is for the player to be able to play 5 different videos, which would start playing by clicking the right (or left) arrows and loop. Sort of like a carousel with only one video visible at a time.

I'm exploring a react video player - http://www.reactexamples.com/react-html5-video/ , but I can't figure out whether it's possible within this or do I have to build it somehow. Has someone done it before or maybe used a different built player?

Upvotes: 0

Views: 1358

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16441

Yeah, looks like that's something you could do with that package. Looks like you can specify the video src like so:

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

You would need to create a list of videos and loop through the list to switch videos. With their approach, they've created an array of videos:

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>
    )
}

Then you would need to attach the nextVideo and prevVideo function to left and right arrows.

Upvotes: 1

Related Questions