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-11-18 08:48:24 -07:00
> **Note:** version 5.2.1 won't have any updates. We are currently working on making a 6.0.0 fully stable
2015-03-30 23:51:58 -06:00
2023-10-26 00:54:14 -06:00
## Documentation
2023-12-21 00:45:28 -07:00
documentation is available at [react-native-video.github.io/react-native-video ](https://react-native-video.github.io/react-native-video/ )
> if you find some issue with new version, don't hesitate to open a ticket! Also Old version can be found [here](https://github.com/react-native-video/react-native-video/tree/v6.0.0-alpha.8)
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
2024-04-11 07:28:04 -06:00
## Community support
We have an discord server where you can ask questions and get help. [Join the discord server ](https://discord.gg/WXuM4Tgb9X )
2024-04-10 00:09:52 -06:00
## Enterprise Support
2023-12-21 00:45:28 -07:00
< p >
2024-04-10 00:09:52 -06:00
📱 < i > react-native-video< / i > is provided < i > as it is< / i > . For enterprise support or other business inquiries, < a href = "https://www.thewidlarzgroup.com/" > please contact us 🤝< / a > . We can help you with the integration, customization and maintenance. We are providing both free and commercial support for this project. let's build something awesome together! 🚀
2023-12-21 00:45:28 -07:00
< / p >
2024-04-10 00:09:52 -06:00
< a href = "https://www.thewidlarzgroup.com/" >
2023-12-21 00:45:28 -07:00
< picture >
< source media = "(prefers-color-scheme: dark)" srcset = "./docs/assets/baners/twg-dark.png" / >
< source media = "(prefers-color-scheme: light)" srcset = "./docs/assets/baners/twg-light.png" / >
2024-05-07 04:30:57 -06:00
< img alt = "TheWidlarzGroup" src = "./docs/assets/baners/twg-light.png" / >
2023-12-21 00:45:28 -07:00
< / picture >
< / a >