mirror of
https://github.com/zoriya/react-native-video.git
synced 2026-05-28 00:53:45 +00:00
chore: update README.md
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user