chore: update README.md

This commit is contained in:
Krzysztof Moch
2024-10-28 14:25:56 +01:00
parent 4ba3b7a61f
commit 136a8a7b94
+48 -5
View File
@@ -1,23 +1,66 @@
# react-native-video
<Video /> Component for React Native
This is (PoC) v7 version of the react-native-video library.
It's experimental and not recommended for production use.
It's working both on New and Old Architecture.
## Requirements
- Please see [nitro requirements](https://nitro.margelo.com/docs/minimum-requirements)
- React Native 0.75 or higher
## Installation
You have to install `react-native-nitro-modules` (>=0.13.0) in your project.
```sh
npm install react-native-video
yarn install react-native-nitro-modules
```
Then install the package
> [!IMPORTANT]
> This package is not published on npm yet. You have to install it from the local path.
```sh
yarn install react-native-video
```
## Usage
```js
import { VideoView } from "react-native-video";
import * as React from 'react';
import { VideoView, createPlayer } from "react-native-video";
// ...
const VideoPlayer = () => {
<VideoView color="tomato" />
// Remember to create a player instance outside of the render method to avoid creating a new instance on each render
// You can also use useMemo to memoize the player instance
const player = React.useMemo(() => createPlayer('https://www.w3schools.com/html/mov_bbb.mp4'), []);
// Usage of player
// Methods
player.play();
player.pause();
// Properties
player.currentTime = 10;
player.volume = 0.5;
// Usage of VideoView
return (
<VideoView
player={player}
style={{ width: 300, height: 300 }}
/>
);
};
```
## Known issues
- [ ] Android: After passing player to second VideoView, the first VideoView will permanently lose player - We need to think how to handle this case - what should happen when player is passed to another VideoView - should we detach it from the previous one and return to it after detaching from the new one?
- [ ] Android: VideoView does not show video on New Architecture - For some reason native event `onNitroIdChange` is fired but not received in JS Component
## Contributing