Documentation
@oplayer/react

oplayer-plugin-react

npm (opens in a new tab) npm bundle size npm dm (opens in a new tab) jsdelivr (opens in a new tab)

React wrapper for oplayer. (NOT WORKING ON REACT STRICT MODE)

Install

npm i @oplayer/core @oplayer/react
import ReactPlayer from '@oplayer/react'
 
const plugins = [
  ui({
    pictureInPicture: true,
    slideToSeek: 'always',
    screenshot: true,
    keyboard: { global: true }
  }),
  hls()
]
 
function playPage() {
  const [source, setSource] = useState<any>()
  const player = useRef<Player>(null)
 
  useEffect(() => {
    setSource(
      // Be a Promise or raw
      fetch(`xxxx`).then((it) => {
        return it
      })
    )
  }, [lastEpisode])
 
  return (
    <>
      <h1>Now Playing "君の名は"</h1>
 
      <ReactPlayer
        plugins={plugins}
        ref={player}
        autoplay={true}
        source={source}
        duration={lastDuration}
        isLive={id == 'iptv'}
        onEvent={(e) => {}}
      />
    </>
  )
}