1.1.8 • Published 2 years ago
react-background-video-player v1.1.8
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 videopause
- pause videotogglePlay
- automatically toggle play state based on current stateisPaused
- get play statemute
- mute videounmute
- unmute videotoggleMute
- automatically toggle mute state based on current stateisMuted
- get mute statesetCurrentTime
- seek in time
Also refer to examples
1.1.8
2 years ago
1.1.7
3 years ago
1.1.6
5 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.3.1
7 years ago
0.3.0
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.15
7 years ago
0.0.14
7 years ago
0.0.13
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago