vnetwork-player
v1.1.34
Published
A React component custom player support video m3u8, mp4
Downloads
171
Maintainers
Readme
VNETWORK Player
A React component custom player support video m3u8, mp4
Demo Player
Installation
npm i vnetwork-player
# or
# yarn add vnetwork-player
Import
import VPlayer from "vnetwork-player";
import "vnetwork-player/dist/vnetwork-player.min.css" // import css
Examples
Video MP4
// mp4 single src
<VPlayer
source="https://example.com/file-video.mp4"
color="#ff0000"
autoPlay
subtitle={[
{
lang: "Fr",
url: "/fr.vtt"
},
{
lang: "En",
url: "/en.vtt"
},
]}
/>
// mp4 multiple src
<VPlayer
source={
[
{ label: "720p", url: "https://example/file/720.mp4" },
{ label: "1080p", url: "https://example/file/1080.mp4" }
]
}
color="#ff0000"
autoPlay
subtitle={[
{
lang: "Fr",
url: "/fr.vtt"
},
{
lang: "En",
url: "/en.vtt"
},
]}
/>
Video M3U8
npm i hls.js
# or
# yarn add hls.js
import Hls from 'hls.js'
// m3u8 single src
<VPlayer
source="https://example.com/file-video.mp4"
color="#ff0000"
autoPlay
subtitle={[
{
lang: "Fr",
url: "/fr.vtt"
},
{
lang: "En",
url: "/en.vtt"
},
]}
Hls={Hls}
/>
// m3u8 multiple src
<VPlayer
source={
[
{ label: "720p", url: "https://example/file/720.mp4" },
{ label: "1080p", url: "https://example/file/1080.mp4" }
]
}
color="#ff0000"
autoPlay
subtitle={[
{
lang: "Fr",
url: "/fr.vtt"
},
{
lang: "En",
url: "/en.vtt"
},
]}
Hls={Hls}
/>
Custom Ref
const ref = useRef(null)
useEffect(() => {
console.log(ref?.current) // Video element
}, [ref?.current])
<VPlayer playerRef={ref} />
Player props
https://github.com/an678-mhg/vnetwork-player/blob/master/src/utils/types.ts