[js: react-player] #js

react-player.md

Overview

github.com/cookpete/react-player

• react でそのまま使える video, audio 再生プレイヤー
• youtube などの映像サービスに広く対応
• 普通に cdn に置いてあるファイルを読んだりとかも ok

$ npm i react-player

import React from 'react'
import ReactPlayer from 'react-player'
import { Center } from '@chakra-ui/react'
import { FaPlayCircle } from 'react-icons/fa'

export const Component = () => {
  const playerRef = React.useRef<ReactPlayer>(null)

  return <>
    <ReactPlayer
      ref={playerRef}
      url={'/videos/sample.mp4'}
      width={'100%'}
      height={'100%'}
      volume={0.5}
      light
      playing
      playIcon={<Center bg={'black'} w={'100%'} h={'100%'}>
        <FaPlayCircle fontSize={160} color={'white'} />
      </Center>}
      controls
      config={{
        file: {
          attributes: {
            onClick: () => {
              // https://github.com/cookpete/react-player?tab=readme-ov-file#instance-methods
              const player = playerRef.current?.getInternalPlayer() as HTMLVideoElement | undefined

              player?.paused
                ? player?.play()
                : player?.pause()
            },
            onContextMenu: (e: any) => e?.preventDefault(),
            controlsList: 'nofullscreen nodownload noremoteplayback',
            disablePictureInPicture: true,
          }
        }
      }}
    />
    <button onClick={() => playerRef.current?.seekTo(10)}>
      Seek to 00:10
    </button>
  </>
}