256 lines
8.7 KiB
Markdown
256 lines
8.7 KiB
Markdown
## react-native-video
|
|
|
|
A `<Video>` component for react-native, as seen in
|
|
[react-native-login](https://github.com/brentvatne/react-native-login)!
|
|
|
|
Requires react-native >= 0.40.0, for RN support of 0.19.0 - 0.39.0 please use a pre 1.0 version.
|
|
|
|
### Add it to your project
|
|
|
|
Run `npm i -S react-native-video`
|
|
|
|
#### iOS
|
|
|
|
Run `react-native link` to link the react-native-video library.
|
|
|
|
If you would like to allow other apps to play music over your video component, add:
|
|
|
|
**AppDelegate.m**
|
|
|
|
```objective-c
|
|
#import <AVFoundation/AVFoundation.h> // import
|
|
|
|
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
|
|
{
|
|
...
|
|
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil]; // allow
|
|
...
|
|
}
|
|
```
|
|
|
|
#### Android
|
|
|
|
Run `react-native link` to link the react-native-video library.
|
|
|
|
Or if you have trouble, make the following additions to the given files manually:
|
|
|
|
**android/settings.gradle**
|
|
|
|
```gradle
|
|
include ':react-native-video'
|
|
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
|
|
```
|
|
|
|
**android/app/build.gradle**
|
|
|
|
```gradle
|
|
dependencies {
|
|
...
|
|
compile project(':react-native-video')
|
|
}
|
|
```
|
|
|
|
**MainApplication.java**
|
|
|
|
On top, where imports are:
|
|
|
|
```java
|
|
import com.brentvatne.react.ReactVideoPackage;
|
|
```
|
|
|
|
Add the `ReactVideoPackage` class to your list of exported packages.
|
|
|
|
```java
|
|
@Override
|
|
protected List<ReactPackage> getPackages() {
|
|
return Arrays.asList(
|
|
new MainReactPackage(),
|
|
new ReactVideoPackage()
|
|
);
|
|
}
|
|
```
|
|
|
|
#### Windows
|
|
|
|
Make the following additions to the given files manually:
|
|
|
|
**windows/myapp.sln**
|
|
|
|
Add the `ReactNativeVideo` project to your solution.
|
|
|
|
1. Open the solution in Visual Studio 2015
|
|
2. Right-click Solution icon in Solution Explorer > Add > Existing Project...
|
|
3. Select `node_modules\react-native-video\windows\ReactNativeVideo\ReactNativeVideo.csproj`
|
|
|
|
**windows/myapp/myapp.csproj**
|
|
|
|
Add a reference to `ReactNativeVideo` to your main application project. From Visual Studio 2015:
|
|
|
|
1. Right-click main application project > Add > Reference...
|
|
2. Check `ReactNativeVideo` from Solution Projects.
|
|
|
|
**MainPage.cs**
|
|
|
|
Add the `ReactVideoPackage` class to your list of exported packages.
|
|
```cs
|
|
using ReactNative;
|
|
using ReactNative.Modules.Core;
|
|
using ReactNative.Shell;
|
|
using ReactNativeVideo; // <-- Add this
|
|
using System.Collections.Generic;
|
|
...
|
|
|
|
public override List<IReactPackage> Packages
|
|
{
|
|
get
|
|
{
|
|
return new List<IReactPackage>
|
|
{
|
|
new MainReactPackage(),
|
|
new ReactVideoPackage(), // <-- Add this
|
|
};
|
|
}
|
|
}
|
|
|
|
...
|
|
```
|
|
|
|
## 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.
|
|
|
|
<Video source={{uri: "background"}} // Can be a URL or a local file.
|
|
ref={(ref) => {
|
|
this.player = ref
|
|
}} // Store reference
|
|
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.
|
|
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
|
|
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
|
|
onBuffer={this.onBuffer} // Callback when remote video is buffering
|
|
onTimedMetadata={this.onTimedMetadata} // Callback when the stream receive some metadata
|
|
style={styles.backgroundVideo} />
|
|
|
|
// Later to trigger fullscreen
|
|
this.player.presentFullscreenPlayer()
|
|
|
|
// To set video position in seconds (seek)
|
|
this.player.seek(0)
|
|
|
|
// Later on in your styles..
|
|
var styles = StyleSheet.create({
|
|
backgroundVideo: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
},
|
|
});
|
|
```
|
|
|
|
- * *For iOS you also need to specify muted for this to work*
|
|
|
|
## Android Expansion File Usage
|
|
|
|
```javascript
|
|
// 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`](http://www.reactnative.com/react-native-v0-14-0-released/) allows loading image resources shared across iOS and Android without touching native code. As of RN `0.31` [the same is true](https://github.com/facebook/react-native/commit/91ff6868a554c4930fd5fda6ba8044dbd56c8374) of mp4 video assets for Android. As of [RN `0.33`](https://github.com/facebook/react-native/releases/tag/v0.33.0) 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][3] for additional details. (NOTE: there is now a ticket to [expose this as a prop]( https://github.com/react-native-community/react-native-video/issues/310) )
|
|
|
|
## Static Methods
|
|
|
|
`seek(seconds)`
|
|
|
|
Seeks the video to the specified time (in seconds). Access using a ref to the component
|
|
|
|
`presentFullscreenPlayer()`
|
|
|
|
Toggles a fullscreen player. Access using a ref to the component.
|
|
|
|
## 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.*
|
|
- Try the included [VideoPlayer example][2] yourself:
|
|
|
|
```sh
|
|
git clone git@github.com:react-native-community/react-native-video.git
|
|
cd react-native-video/example
|
|
npm install
|
|
open ios/VideoPlayer.xcodeproj
|
|
|
|
```
|
|
|
|
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
|
|
|
|
- [ ] Add support for captions
|
|
- [ ] Add support for playing multiple videos in a sequence (will interfere with current `repeat` implementation)
|
|
- [x] Callback to get buffering progress for remote videos
|
|
- [ ] Bring API closer to HTML5 `<Video>` [reference](http://devdocs.io/html/element/video)
|
|
|
|
[1]: https://github.com/brentvatne/react-native-login/blob/56c47a5d1e23781e86e19b27e10427fd6391f666/App/Screens/UserInfoScreen.js#L32-L35
|
|
[2]: https://github.com/react-native-community/react-native-video/tree/master/example
|
|
[3]: https://developer.apple.com/library/ios/qa/qa1668/_index.html
|
|
|
|
---
|
|
|
|
**MIT Licensed**
|