如何给react-player提供的控件添加自定义样式？

Question

我需要根据react-player
https://www.npmjs.com/package/react-player
提供的控件自定义自己的样式 ，有人可以帮忙吗？

Answer 1

首先，您需要将controls属性设置false为隐藏默认控件。然后您可以添加自己的控件。

这是一个超级基本的实现：它有一个播放/暂停按钮和一个进度条。

import {
  Dispatch,
  SetStateAction,
  useState,
  useRef,
  MutableRefObject,
} from "react";
import ReactPlayer from "react-player";
import { IoPlay, IoPause } from "react-icons/io5";

const Player = () => {
  const [playing, setPlaying] = useState(true);
  const [durationSeconds, setDurationSeconds] = useState(0);
  const [playedSeconds, setPlayedSeconds] = useState(0);
  const playerRef = useRef() as MutableRefObject<ReactPlayer>;
  return (
    <div>
      <ReactPlayer
        ref={playerRef}
        controls={false}
        playing={playing}
        url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        onProgress={({ playedSeconds }) => setPlayedSeconds(playedSeconds)}
        onSeek={setPlayedSeconds}
        onDuration={setDurationSeconds} // This is called when the player has the duration
      />
      <Controls
        playerRef={playerRef}
        playing={playing}
        setPlaying={setPlaying}
        playedSeconds={playedSeconds}
        duration={durationSeconds}
      />
    </div>
  );
};

type ControlsProps = {
  playing: boolean;
  setPlaying: Dispatch<SetStateAction<boolean>>;
  playedSeconds: number;
  duration: number;
  playerRef: MutableRefObject<ReactPlayer>;
};

const Controls = (props: ControlsProps) => {
  const seek = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.playerRef.current.seekTo(+e.target.value, "seconds");
  };

  return (
    <div>
      <button onClick={() => props.setPlaying(!props.playing)}>
        {props.playing ? <IoPause /> : <IoPlay />}
      </button>
      <input
        type="range"
        value={props.playedSeconds}
        min="0"
        max={props.duration}
        onChange={seek}
      />
    </div>
  );
};

export default Player;