@nusaplayer/react

npm i @nusaplayer/core @nusaplayer/ui @nusaplayer/react

import { useRef, useState } from 'react'
import type Player from '@nusaplayer/core'
import ReactPlayer from '@nusaplayer/react'
import ui from '@nusaplayer/ui'
import hls from '@nusaplayer/hls'
 
const plugins = [
  ui({
    pictureInPicture: true,
    screenshot: true,
    keyboard: { global: true }
  }),
  hls({ forceHLS: true })
]
 
export function PlayPage() {
  const player = useRef<Player>(null)
  const [source, setSource] = useState({
    src: 'https://vjs.zencdn.net/v/oceans.mp4',
    poster: 'https://vjs.zencdn.net/v/oceans.png',
    title: "Disney's Oceans"
  })
 
  return (
    <ReactPlayer
      ref={player}
      plugins={plugins}
      source={source}
      autoplay={false}
      volume={0.8}
      onEvent={(e) => console.log(e.type)}
    />
  )
}