CODEWITHSUNDEEP
react-nativevideoexpopreload
Colin Jean-Saunier
Colin Jean-Saunier

Reputation: 121

How to preload video with expo react native

I am building a video component in which one I can add multiple sources. And It just read all the videos one after the other. So It's quite simple, for now I'va got only one video component in my custom component and I loadAsync the next video or the previous one when it's needed.

My problem is that when there is bad internet, it can be a bit long to wait between each video.

So I would like to preload videos and cache them like videos are loading at the same time that another is playing.

I tried with FileSystem.downloadAsync() but it's not really smooth, you have to wait the end to have a valid uri to pass it to the video component. So if it's not downloaded before the end of the previous video you can't read it. I was thinking to have multiple video components in my custom component that preload video and play and show when it's the good time but I find it quite complex.

Is there a better way to do that ?

Upvotes: 3

Views: 4536

Answers (1)

Jens Andersson
Jens Andersson

Reputation: 170

I just discovered that you can use downloadAsync like you would on images:

async componentDidMount() {
    await Asset.fromModule(require('../assets/background.mp4')).downloadAsync();
    this.setState({ videoLoaded: true });
}

Upvotes: 1

Related Questions