React-Player实现视频播放与自定义进度条

自定义ReactPlayer进度条以及实现视频分片播放

使用技术栈 Antd React

效果：

实现代码：

• 导入ReactPlayer

import ReactPlayer from 'react-player';
const playerRef = useRef(null);
  <ReactPlayer
   ref={playerRef}
   width='100%'
   height='100%'
   url='视频地址，只能是m3u8结尾的视频格式'
   controls={false} // 关闭自带的控制台
   onProgress={handleProgress} // 控制视频播放进度
   playing={playing}
   audio='false'
   fullscreen={isFullScreen ? 'true' : 'false'}
   onProgress={handleProgress}
   volume={sliderVolume / 100}
   playbackRate={playbackRate}
   pip={videoPip}
   onEnablePIP={() => setVideoPip(true)}
   onDisablePIP={() => setVideoPip(false)}
 />

• 导入Antd Slider组件控制视频进度以及调节视频音量等

  /******[Slider进度]****** */
  const [sliderPlayed, setSliderPlayed] = useState<number>(0);
  /******[视频播放 or 暂停]****** */
  const [playing, setPlaying] = useState<boolean>(true);
  /******[是否显示控制栏]****** */
  const [showControls, setShowControls] = useState<boolean>(true);
  /******[是否全屏]****** */
  const [isFullScreen, setIsFullScreen] = useState<boolean>(true);
  /******[显示音量组件]****** */
  const [showVolume, setShowVolume] = useState<boolean>(false);
  /******[视频声音大小]****** */
  const [sliderVolume, setSliderVolume] = useState<number>(0);
  /******[视频播放倍速]****** */
  const [playbackRate, setPlaybackRate] = useState<number>(1);
  /******[当前视频播放进度]****** */
  const [currentTime, setCurrentTime] = useState<{ minutes: number; seconds: number }>({
    minutes: 0,
    seconds: 0,
  });
   /******[处理视频播放进度变化  ]****** */
  const handleProgress = (state: {
    loaded: React.SetStateAction<number>;
    playedSeconds: number;
    played: React.SetStateAction<number>;
  }) => {
    setCurrentTime(formatTime(state.playedSeconds));
    setSliderPlayed(state.played);
  };
  /******[拖动视频进度条]****** */
 const handleSliderChange = (value: number) => {
    setSliderPlayed(value / 100);
    setPlaying(true);
    playerRef?.current?.seekTo(value / 100, 'fraction');
 };
 <Slider
    className=' mr-30px ml-30px hidden sm:block'
    value={sliderPlayed * 100} 
    onChange={handleSliderChange} 
 />

剩余组件按钮自定义即可。。。。。懒得写了