react-native-video/README.md
Krzysztof Moch 8ad4be459b
feat: add notification controls (#3723)
* feat(ios): add `showNotificationControls` prop

* feat(android): add `showNotificationControls` prop

* add docs

* feat!: add `metadata` property to srouce

This is breaking change for iOS/tvOS as we are moving some properties, but I believe that this will more readable and more user friendly

* chore(ios): remove UI blocking function

* code review changes for android

* update example

* fix readme

* fix typos

* update docs

* fix typo

* chore: improve sample metadata notification

* update codegen types

* rename properties

* update tvOS example

* reset metadata on source change

* update docs

---------

Co-authored-by: Olivier Bouillet <freeboub@gmail.com>
2024-05-07 12:30:57 +02:00

2.3 KiB

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 6.0.0 fully stable

Documentation

documentation is available at 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

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,
  },
});

Community support

We have an discord server where you can ask questions and get help. Join the discord server

Enterprise Support

📱 react-native-video is provided as it is. For enterprise support or other business inquiries, please contact us 🤝. 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! 🚀

TheWidlarzGroup