CODEWITHSUNDEEP
javascriptreactjsvideovideo-streaming
anInputName
anInputName

Reputation: 449

How to load videos before displaying them

I have a video player component that has an array of videos stored in the public folder. Right now I play them one by one in a loop, when one ends the next one starts, but there is a slight delay between the two. How could I load the next video before it starts playing, so that there is no transitional delay?

import React, { Component } from "react"

class Player extends Component {
    constructor(props) {
        super(props)
        this.state = {
            current: 0,
            videos: [
                "/Videos/video_1.mp4",
                "/Videos/video_2.mp4",
                "/Videos/video_3.mp4"
            ]
        }
    }

    onEnd = () => {
        if (this.state.current + 1 === this.state.videos.length) {
            this.setState({ current: 0 });
        } else {
            this.setState({ current: this.state.current + 1 });
        }
    }

    render() {
        return (
            <div>
                <video
                    src={this.state.videos[this.state.current]}
                    autoPlay
                    controls
                    onEnded={this.onEnd}
                />
            </div>
        )
    }
}

export default Player;

Upvotes: 1

Views: 1488

Answers (1)

Horace Lee
Horace Lee

Reputation: 186

Why not have each video element for each source, instead of switch it for one element.

Then left only 1 video element visible, others hidden.

And after the video element finished playing, make the next element visible and start playing.

Upvotes: 1

Related Questions