Add it to your project

iOS

#import<AVFoundation/AVFoundation.h>// import- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  ...  [[AVAudioSessionsharedInstance]setCategory:AVAudioSessionCategoryAmbienterror:nil];// allow  ...}

Android

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

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

importcom.brentvatne.react.ReactVideoPackage;

@OverrideprotectedList<ReactPackage>getPackages() {returnArrays.asList(newMainReactPackage(),newReactVideoPackage()    );}

Windows

usingReactNative;usingReactNative.Modules.Core;usingReactNative.Shell;usingReactNativeVideo;// <-- Add thisusingSystem.Collections.Generic;...public override List<IReactPackage>Packages{get{return new List<IReactPackage>{newMainReactPackage(),newReactVideoPackage(),// <-- Add this};}}...

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.<Videosource={{uri:"background"}}// Can be a URL or a local file.ref={(ref)=>{this.player=ref}}// Store referencerate={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 app entering background.playWhenInactive={false}// [iOS] Video continues to play when control or notification center are shown.ignoreSilentSwitch={"ignore"}// [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.progressUpdateInterval={250.0}// [iOS] Interval to fire onProgress (default to ~250ms)onLoadStart={this.loadStart}// Callback when video starts to loadonLoad={this.setDuration}// Callback when video loadsonProgress={this.setTime}// Callback every ~250ms with currentTimeonEnd={this.onEnd}// Callback when playback finishesonError={this.videoError}// Callback when video cannot be loadedonBuffer={this.onBuffer}// Callback when remote video is bufferingonTimedMetadata={this.onTimedMetadata}// Callback when the stream receive some metadatastyle={styles.backgroundVideo}/>// Later to trigger fullscreenthis.player.presentFullscreenPlayer()// To set video position in seconds (seek)this.player.seek(0)// Later on in your styles..varstyles=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<Videosource={{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 loadonLoad={this.setDuration}// Callback when video loadsonProgress={this.setTime}// Callback every ~250ms with currentTimeonEnd={this.onEnd}// Callback when playback finishesonError={this.videoError}// Callback when video cannot be loadedstyle={styles.backgroundVideo}/>// Later on in your styles..varstyles=Stylesheet.create({backgroundVideo:{position:'absolute',top:0,left:0,bottom:0,right:0,},});

Load files with the RN Asset System

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

Play in background on iOS

Static Methods

Examples

TODOS