Wondering what’s next for npm?Check out our public roadmap! »

    react-background-video-player

    1.1.7 • Public • Published

    react-background-video-player

    React background video component with simple player API. Supports inline play on iPhone.

    Install

    npm i react-background-video-player --save

    Test

    In your terminal go to component folder and run npm t

    Component Props

    {
      playsInline: PropTypes.bool,             // play inline on iPhone. avoid triggering native video player
      disableBackgroundCover: PropTypes.bool,  // do not apply cover effect (e.g. disable it for specific screen resolution or aspect ratio)
      style: PropTypes.object,
      className: PropTypes.string,
      containerWidth: PropTypes.number.isRequired,
      containerHeight: PropTypes.number.isRequired,
      src: PropTypes.oneOfType([
        PropTypes.string, // single source
        PropTypes.array   // multiple sources
      ]).isRequired,
      poster: PropTypes.string,
      horizontalAlign: PropTypes.number,
      verticalAlign: PropTypes.number,
      preload: PropTypes.string,
      muted: PropTypes.bool,   // required to be set to true for auto play on mobile in combination with 'autoPlay' option
      loop: PropTypes.bool,
      volume: PropTypes.number,
      autoPlay: PropTypes.bool,
      extraVideoElementProps: PropTypes.object,
      startTime: PropTypes.number,
      tabIndex: PropTypes.number,
      onReady: PropTypes.func, // passes back `duration`
      onPlay: PropTypes.func,
      onPause: PropTypes.func,
      onMute: PropTypes.func,
      onUnmute: PropTypes.func,
      onTimeUpdate: PropTypes.func, // passes back `currentTime`, `progress` and `duration`
      onEnd: PropTypes.func,
      onClick: PropTypes.func,
      onKeyPress: PropTypes.func
    }

    Default Props

    {
      playsInline: true,
      disableBackgroundCover: false,
      style: {},
      className: '',
      poster: '',
      horizontalAlign: 0.5,
      verticalAlign: 0.5,
      preload: 'auto',
      muted: true,
      loop: true,
      volume: 1,
      autoPlay: true,
      extraVideoElementProps: {},
      startTime: 0,
      tabIndex: 0,
    }

    API

    • play - play video
    • pause - pause video
    • togglePlay - automatically toggle play state based on current state
    • isPaused - get play state
    • mute - mute video
    • unmute - unmute video
    • toggleMute - automatically toggle mute state based on current state
    • isMuted - get mute state
    • setCurrentTime - seek in time

    Also refer to examples

    Install

    npm i react-background-video-player

    DownloadsWeekly Downloads

    526

    Version

    1.1.7

    License

    MIT

    Unpacked Size

    28.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar