react-native-video/README.md

60 lines
2.3 KiB
Markdown
Raw Normal View History

2015-03-30 23:07:55 -06:00
## react-native-video
A <Video> component for react-native, as seen in
[react-native-login](https://github.com/brentvatne/react-native-login).
2015-03-30 23:51:58 -06:00
### Add it to your project
2015-04-09 13:29:11 -06:00
1. Run `npm install react-native-video --save` **(must be 0.3.10 or higher)**
2015-03-30 23:51:58 -06:00
2. Open your project in XCode, right click on `Libraries` and click `Add
2015-04-04 19:37:31 -06:00
Files to "Your Project Name"` [(Screenshot)](http://url.brentvatne.ca/g9Wp).
2015-03-30 23:51:58 -06:00
3. Add `libRTCVideo.a` to `Build Phases -> Link Binary With Libraries`
[(Screenshot)](http://url.brentvatne.ca/g9Wp).
4. Click on `RCTVideo.xcodeproj` in `Libraries` and go the `Build
Phases` tab. Double click the text to the right of `Header Search
Paths` and verify that it has `$(SRCROOT)../react-native/React` - if it
isn't, then add it. This is so XCode is able to find the headers that
the `RCTVideo` source files are referring to by pointing to the
header files installed within the `react-native` `node_modules`
directory. [(Screenshot)](http://url.brentvatne.ca/7wE0).
2015-03-30 23:51:58 -06:00
5. Whenever you want to use it within React code now you can: `var Video =
require('react-native-video');`
## Example
```javascript
// Within your render function, assuming you have a file called
2015-04-04 18:57:35 -06:00
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.
2015-04-08 13:05:46 -06:00
<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.
style={styles.backgroundVideo} />
2015-03-30 23:51:58 -06:00
// Later on in your styles..
var styles = Stylesheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
2015-03-30 23:57:04 -06:00
```
2015-03-30 23:51:58 -06:00
2015-03-30 23:57:04 -06:00
Example code [here](https://github.com/brentvatne/react-native-login/blob/master/index.ios.js).
2015-03-31 00:06:54 -06:00
## TODOS
2015-04-05 11:25:04 -06:00
- [ ] Add some way to interface with `seekToTime`
2015-04-05 11:26:40 -06:00
- [ ] Add support for captions
2015-04-07 21:48:07 -06:00
- [ ] Support `require('video!...')`
2015-04-05 11:25:04 -06:00
- [ ] Add support for playing multiple videos in a sequence (will interfere with current `repeat` implementation)
2015-04-07 21:48:07 -06:00
- [ ] Add `onComplete` callback for when it finishes playing