@@ -34,12 +35,14 @@ Install [rnpm](https://github.com/rnpm/rnpm) and run `rnpm link react-native-vid
Or if you have trouble using [rnpm](https://github.com/rnpm/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 {
...
...
...
@@ -50,53 +53,56 @@ dependencies {
**MainActivity.java**
On top, where imports are:
```java
importcom.brentvatne.react.ReactVideoPackage;
```
Under `.addPackage(new MainReactPackage())`:
```java
.addPackage(newReactVideoPackage())
```
### Note:In react-native >= 0.29.0 you have to edit MainApplication.java
### 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:
```java
importcom.brentvatne.react.ReactVideoPackage;
```
Under `.addPackage(new MainReactPackage())`:
```java
.addPackage(newReactVideoPackage())
```
## Usage
```javascript
// 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.
playInBackground={false}// Audio continues to play when app entering background.
playWhenInactive={false}// [iOS] Video continues to play when control 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}/>
<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..
varstyles=StyleSheet.create({
...
...
@@ -110,9 +116,24 @@ var styles = StyleSheet.create({
});
```
### Load files with the RN Asset System
The asset system [introduced in RN `0.14`](http://www.reactnative.com/react-native-v0-14-0-released/) allows loading local static resources using a `require` statement. As of version `react-native-video@0.9.0`, it's also be used to load video files in the same manner, e.g.
**Tip**: When loading files locally on iOS it's necessary to add static video file to the _Copy Bundle Resources_ section of _Build Phases_ for your project's build target in Xcode.
### 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][3].
To enable audio to play in background on iOS the audio session needs to be set to `AVAudioSessionCategoryPlayback`. See [Apple documentation][3] for additional details.
## Static Methods
...
...
@@ -122,7 +143,7 @@ Seeks the video to the specified time (in seconds). Access using a ref to the co
## Examples
- See an [Example integration][1] 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.
- See an [Example integration][1] 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][2] yourself:
```sh
...
...
@@ -135,6 +156,8 @@ Seeks the video to the specified time (in seconds). Access using a ref to the co
Then `Cmd+R` to start the React Packager, build and run the project in the simulator.
-[Lumpen Radio](https://github.com/jhabdas/lumpen-radio) contains another example integration using local files and full screen background video.
