react-native-video-player/README.md

A <VideoPlayer /> component for React Native with controls

# react-native-video-player

🎥 `<VideoPlayer />` component for React Native with a few controls. This player uses [react-native-video](https://github.com/TheWidlarzGroup/react-native-video) under the hood

<div align="center">
  <video src="https://github.com/user-attachments/assets/e7e45760-54d0-403e-94bf-2a02ee49a9ee">
    Demo video
  </video>
</div>

## Documentation
documentation is available at [docs.thewidlarzgroup.com/react-native-video-player/](https://docs.thewidlarzgroup.com/react-native-video-player/)

## Installation

```
yarn add react-native-video-player react-native-video
```

or
```
npm install --save react-native-video-player react-native-video
```

Then, install pods
```
cd ios
pod install
```

## Example

```tsx
  import VideoPlayer, { type VideoPlayerRef } from 'react-native-video-player';

  const playerRef = useRef<VideoPlayerRef>(null);

  <VideoPlayer
    ref={playerRef}
    endWithThumbnail
    thumbnail={{
      uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
    }}
    source={{
      uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    }}
    onError={(e) => console.log(e)}
    showDuration={true}
  />
```

## Future features

Check out our [Roadmap](https://github.com/TheWidlarzGroup/react-native-video-player/discussions/186) for what's coming up next! We're always working on new features and improvements, so stay tuned!

## Community support
We have a discord server where you can ask questions and get help. [Join the discord server](https://discord.gg/WXuM4Tgb9X)

## Enterprise Support
<p>
  📱 <i>react-native-video-player</i> is provided <i>as it is</i>. For enterprise support or other business inquiries, <a href="https://www.thewidlarzgroup.com/?utm_source=rnvp&utm_medium=readme#Contact">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! 🚀
</p>
<a href="https://www.thewidlarzgroup.com/?utm_source=rnvp&utm_medium=readme">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="./docs/static/img/banners/twg-dark.png" />
    <source media="(prefers-color-scheme: light)" srcset="./docs/static/img/banners/twg-light.png" />
    <img alt="TheWidlarzGroup" src="./docs/static/img/banners/twg-light.png" />
  </picture>
</a>