https://github.com/an678-mhg/vnetwork-player
A React component custom player support video m3u8, mp4
https://github.com/an678-mhg/vnetwork-player
library player-video react-library reactjs
Last synced: 8 months ago
JSON representation
A React component custom player support video m3u8, mp4
- Host: GitHub
- URL: https://github.com/an678-mhg/vnetwork-player
- Owner: an678-mhg
- Created: 2023-11-30T08:36:24.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-27T06:31:11.000Z (over 1 year ago)
- Last Synced: 2024-11-27T07:19:00.793Z (over 1 year ago)
- Topics: library, player-video, react-library, reactjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vnetwork-player
- Size: 514 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VNETWORK Player
[](https://www.npmjs.com/package/vnetwork-player)

[](https://pkg-size.dev/vnetwork-player)
[](https://www.npmjs.com/package/vnetwork-player)

A React component custom player support video m3u8, mp4
## Demo Player
https://vnetwork-player.vercel.app/
## Installation
```bash
npm i vnetwork-player
# or
# yarn add vnetwork-player
```
## Import
```jsx
import VPlayer from "vnetwork-player";
import "vnetwork-player/dist/vnetwork-player.min.css" // import css
```
## Examples
### Video MP4
```jsx
// mp4 single src
// mp4 multiple src
```
### Video M3U8
```bash
npm i hls.js
# or
# yarn add hls.js
```
```jsx
import Hls from 'hls.js'
// m3u8 single src
// m3u8 multiple src
```
### Custom Ref
```jsx
const ref = useRef(null)
useEffect(() => {
console.log(ref?.current) // Video element
}, [ref?.current])
```
## Player props
https://github.com/an678-mhg/vnetwork-player/blob/master/src/utils/types.ts