railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add instructions for Asset System usage

Browse Source
This commit is contained in:
Josh Habdas 2016-08-16 15:34:14 -05:00
parent 1479b3ebd7
commit 0eaf3b2698
No known key found for this signature in database
GPG Key ID: BB7367EE9A70A631
1 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
README.md
View File

@ -7,16 +7,17 @@ Requires react-native >= 0.19.0
### Add it to your project ### Add it to your project
Run `npm install react-native-video --save` Run `npm i -S react-native-video`
#### iOS #### iOS
Install [rnpm](https://github.com/rnpm/rnpm) and run `rnpm link react-native-video` Install [rnpm](https://github.com/rnpm/rnpm) and run `rnpm link react-native-video`.
If you would like to allow other apps to play music over your video component, add: If you would like to allow other apps to play music over your video component, add:
**AppDelegate.m** **AppDelegate.m**
```
```objective-c
#import <AVFoundation/AVFoundation.h> // import #import <AVFoundation/AVFoundation.h> // import
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
@ -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: Or if you have trouble using [rnpm](https://github.com/rnpm/rnpm), make the following additions to the given files manually:
**android/settings.gradle** **android/settings.gradle**
``` ```
include ':react-native-video' include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android') project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
``` ```
**android/app/build.gradle** **android/app/build.gradle**
``` ```
dependencies { dependencies {
... ...
@ -50,53 +53,56 @@ dependencies {
**MainActivity.java** **MainActivity.java**
On top, where imports are: On top, where imports are:
```java ```java
import com.brentvatne.react.ReactVideoPackage; import com.brentvatne.react.ReactVideoPackage;
``` ```
Under `.addPackage(new MainReactPackage())`: Under `.addPackage(new MainReactPackage())`:
```java ```java
.addPackage(new ReactVideoPackage()) .addPackage(new ReactVideoPackage())
``` ```
### 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) **MainApplication.java** (react-native >= 0.29.0)
On top, where imports are: On top, where imports are:
```java ```java
import com.brentvatne.react.ReactVideoPackage; import com.brentvatne.react.ReactVideoPackage;
``` ```
Under `.addPackage(new MainReactPackage())`: Under `.addPackage(new MainReactPackage())`:
```java ```java
.addPackage(new ReactVideoPackage()) .addPackage(new ReactVideoPackage())
``` ```
## Usage ## Usage
```javascript ```javascript
// Within your render function, assuming you have a file called // Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos // "background.mp4" in your project. You can include multiple videos
// on a single screen if you like. // on a single screen if you like.
<Video source={{uri: "background"}} // Can be a URL or a local file. <Video
rate={1.0} // 0 is paused, 1 is normal. source={{uri: "background"}} // Can be a URL or a local file.
volume={1.0} // 0 is muted, 1 is normal. rate={1.0} // 0 is paused, 1 is normal.
muted={false} // Mutes the audio entirely. volume={1.0} // 0 is muted, 1 is normal.
paused={false} // Pauses playback entirely. muted={false} // Mutes the audio entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio. paused={false} // Pauses playback entirely.
repeat={true} // Repeat forever. resizeMode="cover" // Fill the whole screen at aspect ratio.
playInBackground={false} // Audio continues to play when app entering background. repeat={true} // Repeat forever.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown. playInBackground={false} // Audio continues to play when aentering background.
onLoadStart={this.loadStart} // Callback when video starts to load playWhenInactive={false} // [iOS] Video continues to play whcontrol or notification center are shown.
onLoad={this.setDuration} // Callback when video loads onLoadStart={this.loadStart} // Callback when video starts to load
onProgress={this.setTime} // Callback every ~250ms with currentTime onLoad={this.setDuration} // Callback when video loads
onEnd={this.onEnd} // Callback when playback finishes onProgress={this.setTime} // Callback every ~250ms with currentTime
onError={this.videoError} // Callback when video cannot be loaded onEnd={this.onEnd} // Callback when playback finishes
style={styles.backgroundVideo} /> onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo}
/>
// Later on in your styles.. // Later on in your styles..
var styles = StyleSheet.create({ var styles = 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.
```
<Video
repeat
resizeMode='cover'
source={require('../assets/video/turntable-loop-1920x500-h264-512kbps-h264.mp4')}
style={styles.backgroundVideo}
/>
```
**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 ### 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 ## Static Methods
@ -122,7 +143,7 @@ Seeks the video to the specified time (in seconds). Access using a ref to the co
## Examples ## 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: - Try the included [VideoPlayer example][2] yourself:
```sh ```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. 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.
## TODOS ## TODOS
- [ ] Add support for captions - [ ] Add support for captions