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 i -S react-native-video

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

Install rnpm and run rnpm link react-native-video

Or if you have trouble using rnpm, make the following additions to the given files manually:

android/settings.gradle

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

android/app/build.gradle

dependencies {
   ...
   compile project(':react-native-video')
}

MainActivity.java

On top, where imports are:

import com.brentvatne.react.ReactVideoPackage;

Under .addPackage(new MainReactPackage()):

.addPackage(new ReactVideoPackage())

Note: In react-native >= 0.29.0 you have to edit MainApplication.java

MainApplication.java (react-native >= 0.29.0)

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.
  playInBackground={false}     // Audio continues to play when aentering background.
  playWhenInactive={false}     // [iOS] Video continues to play whcontrol or notification center are shown.
  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,
  },
});

Android Expansion File Usage

// Within your render function, assuming you have a file called
// "background.mp4" in your expansion file. Just add your main and (if applicable) patch version
<Video source={{uri: "background", mainVer: 1, patchVer: 0}} // Looks for .mp4 file (background.mp4) in the given expansion version.
       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,
  },
});

Load files with the RN Asset System

The asset system introduced in RN 0.14 allows loading image resources shared across iOS and Android without touching native code. As of RN 0.31 the same is true of mp4 video assets for Android. As of RN 0.33 iOS is also supported. Requires react-native-video@0.9.0.

<Video
  repeat
  resizeMode='cover'
  source={require('../assets/video/turntable.mp4')}
  style={styles.backgroundVideo}
/>

Play in background on iOS

To enable audio to play in background on iOS the audio session needs to be set to AVAudioSessionCategoryPlayback. See Apple documentation for additional details. (NOTE: there is now a ticket to expose this as a prop )

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.

• Lumpen Radio contains another example integration using local files and full screen background video.

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