Install

npm i splayer-react

Usage

import SPlayer from 'splayer-react'

<SPlayer 
  options={{ 
    videoSrc: 'https://xxx', 
    width: 'xxx', 
    height: 'xxx', 
    isShowToast: true, 
    pauseButtonPlace: 'center', 
  }} 
/>

Props

| Props | type | description | | - | - | - | | options | VideoOptions | component config | | style | React.CSSProperties | style attribute | | className | string | class | | onProgressMouseDown | (e: VideoAttributes) => void | drag the progress bar callback | | onPlay | (e: VideoAttributes) => void | video start playing callback | | onPause |(e: VideoAttributes) => void| video pause callback | | onTimeChange | (e: VideoAttributes) => void | time change callback | | onEndEd | (e: VideoAttributes) => void | video end callback | | onProgressMouseUp | (e: VideoAttributes) => void | slider release callback | | onError | () => void | play error callback | | onVolumeChange | (e: VideoAttributes) => void | volume change callback | | onQualityChange | (e: QualityKey) => void | quality change callback |

VideoOptions

type pauseButtonPlace = 'bottomRight' | 'center';

type Language = 'zh' | 'en';

type QualityAttributes = {
  name: string;
  url: string;
}

type VideoType = 'h264' | 'hls';

type ToastPosition =
  | 'leftTop'
  | 'rightTop'
  | 'leftBottom'
  | 'rightBottom'
  | 'center';

type ProgressFloatPosition = 'top' | 'bottom';

interface VideoOptions<T = string, K = boolean, U = number> {
  /**
   * @description the width of the video container
   */
  width: U;
  /**
   * @description the height of the video container
   */
  height: U;
  /**
   * @description video source
   */
  videoSrc: T;
  /**
   * @description component theme
   */
  theme?: T;
  /**
   * @description the video poster
   */
  poster?: T;
  /**
   * @description customize what is displayed at the end of the video
   */
  setEndDisplayContent?: React.ReactNode;
  /**
   * @description customize the video loading component
   */
  setBufferContent?: React.ReactNode;
  /**
   * @description customize the video pause button component
   */
  setPauseButtonContent?: React.ReactNode;
  /**
   * @description the position of pause button
   */
  pauseButtonPlace?: pauseButtonPlace;
  /**
   * @description hide the mouse cursor time /ms
   */
  hideMouseTime?: U;
  /**
   * @description whether to show multiple function
   */
  isShowMultiple?: K;
  /**
   * @description whether to show setting function
   */
  isShowSet?: K;
  /**
   * @description whether to show screenshot
   */
  isShowScreenshot?: K;
  /**
   * @description whether to show picture-in-picture function
   */
  isShowPicInPic?: K;
  /**
   * @description whether to show page full screen function
   */
  isShowFullScreen?: K;
  /**
   * @description language
   */
  language?: Language;
  /**
   * @description whether to show pause button
   */
  isShowPauseBtn?: K;
  /**
   * @description the list of video quality
   */
  quality?: QualityAttributes[];
  /**
   * @description video playback format，suport for h264(.mp4,.webm,.ogg)，hls(m3u8), the default format is h264
   */
  videoType?: VideoType;
  /**
   * @description whether to show toast component
   */
  isShowToast?: K;
  /**
   * @description the position displayed by Toast, valid when `isShowToast` is true
   */
  toastPosition?: ToastPosition;
  /**
   * @description whether to show progress bar floating layer
   */
  isShowProgressFloat?: K;
  /**
   * @description the position displayed by progress bar floating layer, valid when `isShowProgressFloat` is true
   */
  progressFloatPosition?: ProgressFloatPosition;
}

VideoAttributes

interface VideoAttributes<T = number, K = boolean> {
  /**
   * @description whether to play
   */
  isPlay: K;
  /**
   * @description current time, unit: s
   */
  currentTime: T;
  /**
   * @description total time, unit: s
   */
  duration: T;
  /**
   * @description buffered time, unit: s
   */
  bufferedTime: T;
  /**
   * @description wether to enable picture-in-picture mode
   */
  isPicInPic: K;
  /**
   * @description volume
   */
  volume: T;
  /**
   * @description video playback speed
   */
  multiple: T;
  /**
   * @description whether to end
   */
  isEnded: K;
  /**
   * @description error
   */
  error: null | T;
}

License

MIT License © 2022 Lovell Liu