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
1. Run `npm install react-native-video --save`
2. Open your project in XCode, right click on `Libraries` and click `Add
Files to "Your Project Name" [(Screenshot) ](http://url.brentvatne.ca/g9Wp ).
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
2015-03-31 00:05:42 -06:00
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
// "background.mp4" in your project
2015-03-31 00:29:15 -06:00
< Video source = {"background"} style = {styles.backgroundVideo} repeat = {true} / >
2015-03-30 23:51:58 -06:00
// Later on in your styles..
var styles = Stylesheet.create({
backgroundVideo: {
resizeMode: 'cover', // stretch and contain also supported
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
- [ ] Support `require('video!...')`
- [ ] Support other extensions than mp4?
2015-03-31 00:29:15 -06:00
- [x] Add prop to set repeat (none or forever)
- [ ] Add support [for other props ](https://developer.apple.com/library/prerelease/ios/documentation/MediaPlayer/Reference/MPMoviePlayerController_Class/index.html )
- [ ] Tests..