mirror of
https://github.com/zoriya/react-native-video.git
synced 2026-06-02 11:06:11 +00:00
chore: update README.md
This commit is contained in:
@@ -1,23 +1,66 @@
|
|||||||
# react-native-video
|
# 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
|
## Installation
|
||||||
|
|
||||||
|
You have to install `react-native-nitro-modules` (>=0.13.0) in your project.
|
||||||
```sh
|
```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
|
## Usage
|
||||||
|
|
||||||
|
|
||||||
```js
|
```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
|
## Contributing
|
||||||
|
|||||||
Reference in New Issue
Block a user