React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also works with the React Native asset management system to load videos. Having a flexible video component is essential to developing and enhancing your application.

Like many React Native elements, the video element is very basic and doesn't ship with anything besides a flexible API. This allows you to develop the exact layout, controls, and custom overlays to match your application.

In this course we'll take a look at a basic setup. Then explore the different ways we can load and show videos. We'll show how to use a few of the custom callbacks to overlay errors and buffering elements. Because there are no controls shipped with `react-native-video` we'll show how to write custom video controls and animate them when the video has not been interacted with.

Finally we'll cover a few common paradigms found in the wild. Including repeating background cover videos, auto-playing videos when they scroll onto the screen and auto-stopping them when they are scrolled away from.

In this lesson we'll install react-native-video with NPM. We'll use the `react-native link` command to setup all necessary native code.

Setup React Native Video for iOS and Android

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

Use Local Files or Remote Video Files with React Native Video

In this lesson we'll show to use the `onError` callback from `react-native-video`. We'll show how to put a separate view to cover the video and render an error icon from `react-native-vector-icons`. Finally we'll add custom error messages based upon the error code returned.

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

In this lesson we'll show how to use icons from `react-native-vector-icons`. With absolute positioning we'll center the icon over the video. Then we'll use the `Animated.loop` call to rotate the icon continuously in a 360 degree loop. Finally we'll the `stopAnimation` call to pause the animation when we are no longer buffering.

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

In this lesson we'll show how to use React Native Video to cover the entire background. We'll use the `repeat` property, and also the helper `StyleSheet.absoluteFill` property so we do not need to replicate styles. We'll then show how to place a login form on top of the looping video.

Create a Looping Background Video with React Native Video

In this lesson we'll setup a `react-native-video` player that is paused when it is not visible but when scrolled into view starts playing the video. We'll also show how to add a small ending threshold so once the video is only partially out of view it will pause.

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

In this lesson we'll use `react-native-vector-icons` to add play/paused buttons, a seek bar, and the duration of the video. We'll use the `onLoad`, `onProgress`, and `onEnd` callbacks to track the video progress. We'll use the `react-native-progress` to create an animated progress bar for us. Finally with `TouchableWithoutFeedback` we will add a tap to seek interaction to jump to specific times in the video.

Create Custom Controls for React Native Video

We'll modify our previous controls to animate visible when the video is touched or interacted with. The video controls will animate visible in when the video is touched, played, or continues to be interacted with. After a 1500ms timeout elapses the controls will animate away.