https://github.com/Experience-Monks/react-background-video-player

React background video component with simple player API
https://github.com/Experience-Monks/react-background-video-player

background-video react react-component react-components reactjs ui-components video video-player

Last synced: over 1 year ago
JSON representation

React background video component with simple player API

• Host: GitHub
• URL: https://github.com/Experience-Monks/react-background-video-player
• Owner: Experience-Monks
• Created: 2016-12-26T01:06:44.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-04-17T19:11:29.000Z (about 3 years ago)
• Last Synced: 2025-02-26T01:32:26.587Z (over 1 year ago)
• Topics: background-video, react, react-component, react-components, reactjs, ui-components, video, video-player
• Language: JavaScript
• Homepage:
• Size: 14.2 MB
• Stars: 57
• Watchers: 32
• Forks: 15
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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

```javascript

{

  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

```javascript

{

  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](https://github.com/Jam3/react-background-video-player/tree/master/test)