Fundamentals of React Native Video
Enhance your React Native application with React Native Video, a community supported video element. Load remote videos and customize layouts, controls, and overlays. Learn how to handle errors, buffering, and create looping background videos. Auto-play videos when scrolled into view and create custom controls that hide/show when interacted with. This course covers setup for iOS and Android, using local or remote video files, and creating a seamless video experience. Boost your app’s functionality with React Native Video.
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
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.
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