2022-05-23 23:03:49 -06:00
|
|
|
# react-native-video
|
2023-10-26 00:54:14 -06:00
|
|
|
🎬 `<Video>` component for React Native
|
2015-03-30 23:07:55 -06:00
|
|
|
|
2023-10-26 00:54:14 -06:00
|
|
|
> **Note:** version 5.2.1 won't have any updates. We are currently working on making a alpha 6.0.0 stable
|
2015-03-30 23:51:58 -06:00
|
|
|
|
2023-10-26 00:54:14 -06:00
|
|
|
## Documentation
|
|
|
|
Documentation is available at [react-native-video.github.io/react-native-video](https://react-native-video.github.io/react-native-video/).
|
2019-07-25 01:17:39 -06:00
|
|
|
|
2023-10-26 00:54:14 -06:00
|
|
|
## Usage
|
2018-10-13 21:16:10 -06:00
|
|
|
|
2023-10-26 00:54:14 -06:00
|
|
|
```javascript
|
|
|
|
// Load the module
|
2015-05-17 12:40:23 -06:00
|
|
|
|
2023-10-26 00:54:14 -06:00
|
|
|
import Video, {VideoRef} from 'react-native-video';
|
2018-09-03 20:01:12 -06:00
|
|
|
|
2023-10-26 00:54:14 -06:00
|
|
|
// 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,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
```
|
2015-05-17 12:40:23 -06:00
|
|
|
|