85e30f0335
* feat(docs): setup nextra * feat(docs): add pages * docs: update introduction page * docs: fix typos * docs: fix links * docs: update README * docs: sync with master * docs: remove old docs * fix(ci/docs): fix typos * fix(ci/docs): fix docs setup * fix(docs): update next config * chore(ci/docs): clean up * chore(docs): add meta tags * chore: apply review changes * docs: move drm into api section * docs: fix next config * docs: fix links * docs: add methods section * chore: sync with main * docs: add missing onAudio events |
||
|---|---|---|
| .github | ||
| android | ||
| docs | ||
| examples | ||
| ios | ||
| src | ||
| windows | ||
| .eslintignore | ||
| .eslintrc | ||
| .gitignore | ||
| .nvmrc | ||
| .prettierrc | ||
| CHANGELOG.md | ||
| CONTRIBUTING.md | ||
| LICENSE | ||
| package.json | ||
| react-native-video.podspec | ||
| README.md | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
react-native-video
🎬 <Video> component for React Native
Note: version 5.2.1 won't have any updates. We are currently working on making a alpha 6.0.0 stable
Documentation
Documentation is available at react-native-video.github.io/react-native-video.
Usage
// Load the module
import Video, {VideoRef} from 'react-native-video';
// 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.
const VideoPlayer = () => {
const videoRef = useRef<VideoRef>(null);
const background = require('./background.mp4');
return (
<Video
// Can be a URL or a local file.
source={background}
// Store reference
ref={videoRef}
// Callback when remote video is buffering
onBuffer={onBuffer}
// Callback when video cannot be loaded
onError={onError}
style={styles.backgroundVideo}
/>
)
}
// Later on in your styles..
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});