A React component custom player support video m3u8, mp4

VNETWORK Player

A React component custom player support video m3u8, mp4

Demo Player

Demo in stackblitz

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

GitHub

View Github