Setup React Native Video for iOS and Android

Use Local Files or Remote Video Files with React Native Video

Show An Error Message When A Video Fails to Load in React Native

Show an Animated Buffering Icon When Remote Videos are Loading in React Native

Create a Looping Background Video with React Native Video

Create a Video that Auto Plays when Scrolled into View in React Native

Create Custom Controls for React Native Video

Create Controls that Hide/Show When Video Is Interacted With in React Native

Fundamentals of React Native Video

In this lesson we'll show the different methods that `react-native-video` allows to play video including remote video files as well as local files imported as asset files by React Native.

We'll also show you a couple properties you can use on your `<Video/>` component to resize and add some styles!




React Native video supports MP4s from remote and also from the local file system using the React Native asset system. To use that, we can add an MP4 anywhere within our directory. We have one here called lights.mp4.

We can use require or we can also use import. We'll import light video from ./lights.mp4. Then to use it with our React Native video component we type video and pass it in as the source.

To use remote videos, we'll need to use a object here rather than a import and type URI and then pass in the string of the MP4 that you want to use. It's important to note that we import the video before we start our build, because there's a special build process script that runs when you start up the packager.

If we go back to our Xcode and now we start our build, the packager will start up, iOS Simulator will also start up and our video will be included in the asset system.

Now that we have our simulator started up, we can show off the video actually working. First, we'll switch this back to use the light video that we imported. We will add a resize mode of cover, then also add the style and use the styleSheet.absoluteFill to cover the entire thing.

Now that we have refreshed, we can see that our video is automatically playing and it is covering the entire screen. We can then also switch this back to our URI, save it, refresh, and also see that our video is playing from a remote source.

Use Local Files or Remote Video Files with React Native Video

Share this video with your friends

Course

Fundamentals of React Native Video