Package Exports
- react-native-video
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-video) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-video
A
Add it to your project
- Run
npm install react-native-video --save
- Open your project in XCode, right click on
Libraries
and clickAdd Files to "Your Project Name"
(Screenshot) then (Screenshot) (use the RCTVideo project rather than the one pictured in screenshot). - Add
libRTCVideo.a
toBuild Phases -> Link Binary With Libraries
(Screenshot). - Whenever you want to use it within React code now you can:
var Video = require('react-native-video');
Example
// 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.
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.
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
style={styles.backgroundVideo} />
// Later on in your styles..
var styles = Stylesheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
Example code
here,
or try out the example
VideoPlayer
app - clone this repo, cd into it, npm install
open the project in
XCode and build.
TODOS
- Add some way to interface with
seekToTime
- Add support for captions
- Support
require('video!...')
- Add support for playing multiple videos in a sequence (will interfere with current
repeat
implementation) - Callback to get buffering progress for remote videos
- Bring API closer to HTML5
<Video>
reference