react-native-video

A

Requires react-native >= 0.4.4

Add it to your project

Run npm install react-native-video --save

iOS

1. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name"
   • (use the RCTVideo project rather than the one pictured in screenshot).
2. Add libRTCVideo.a to Build Phases -> Link Binary With Libraries.
3. Add .mp4 video file to project and to Build Phases -> Copy Bundle Resources
4. Whenever you want to use it within React code now you can: var Video = require('react-native-video');

Android

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:

importcom.brentvatne.react.ReactVideoPackage;

Under .addPackage(new MainReactPackage()):

.addPackage(newReactVideoPackage())

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.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,},});

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.

• 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 some way to interface with seekToTime
• Add support for captions
• Support require('video!...')
• 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