louislai/react-native-video

A <Video /> component for react-native

react-native-video

A <Video> component for react-native, as seen in react-native-login!

Requires react-native >= 0.19.0

Add it to your project

Run npm install react-native-video --save

iOS

Install rnpm and run rnpm link react-native-video

If you would like to allow other apps to play music over your video component, add:

AppDelegate.m

#import <AVFoundation/AVFoundation.h>  // import

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
  ...
}

Android

First, copy your video file to android/app/src/main/res/raw/, then make the following additions to the given files:

android/settings.gradle

include ':RCTVideo', ':app'
project(':RCTVideo').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

android/app/build.gradle

dependencies {
   ...
   compile project(':RCTVideo')
}

MainActivity.java

On top, where imports are:

import com.brentvatne.react.ReactVideoPackage;

Under .addPackage(new MainReactPackage()):

.addPackage(new ReactVideoPackage())

Usage

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.
<Video source={{uri: "background"}} // Can be a URL or a local file.
       rate={1.0}                   // 0 is paused, 1 is normal.
       volume={1.0}                 // 0 is muted, 1 is normal.
       muted={false}                // Mutes the audio entirely.
       paused={false}               // Pauses playback entirely.
       resizeMode="cover"           // Fill the whole screen at aspect ratio.
       repeat={true}                // Repeat forever.
       onLoadStart={this.loadStart} // Callback when video starts to load
       onLoad={this.setDuration}    // Callback when video loads
       onProgress={this.setTime}    // Callback every ~250ms with currentTime
       onEnd={this.onEnd}           // Callback when playback finishes
       onError={this.videoError}    // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Static Methods

seek(seconds)

Seeks the video to the specified time (in seconds). Access using a ref to the component

Examples

• See an Example integration in react-native-login *note that this example uses an older version of this library, before we used export default -- if you use require you will need to do require('react-native-video').default as per instructions above.

• Try the included VideoPlayer example yourself:

  git clone git@github.com:brentvatne/react-native-video.git
  cd react-native-video/Examples/VideoPlayer
  npm install
  open VideoPlayer.xcodeproj
  

  Then Cmd+R to start the React Packager, build and run the project in the simulator.

TODOS

• Add support for captions
• Add support for playing multiple videos in a sequence (will interfere with current repeat implementation)
• Callback to get buffering progress for remote videos
• Bring API closer to HTML5 <Video> reference

---

MIT Licensed