ReactPlyr Video Component
A React video component based on Plyr.
Installation
Add react-plyr
into your package.json dependencies:
npm install react-plyr --save
Usage
import Plyr from 'react-plyr';
// add the component in the render function
render() {
return (
<Plyr
type="youtube"
videoId="CDFN1VatiJA"
/>
)
}
Props
Name | Type | Required | Default |
---|---|---|---|
type | oneOf('youtube','vimeo','video','audio') |
'youtube' |
|
className | string |
'react-plyr' |
|
videoId | string |
||
url | string |
||
poster | string |
||
sources | arrayOf |
||
onReady | func |
||
onPlay | func |
||
onPause | func |
||
onEnd | func |
||
onLoadedData | func |
||
onSeeked | func |
||
onEnterFullscreen | func |
||
onVolumeChange | func |
||
enabled | bool |
☑️true |
|
controls | arrayOf |
['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] |
|
loadSprite | bool |
☑️true |
|
iconUrl | string |
null |
|
iconPrefix | string |
'plyr' |
|
debug | bool |
false |
|
autoplay | bool |
false |
|
preload | string |
||
seekTime | number |
10 |
|
volume | number |
5 |
|
clickToPlay | bool |
☑️true |
|
disableContextMenu | bool |
☑️true |
|
hideControls | bool |
☑️true |
|
showPosterOnEnd | bool |
false |
|
keyboardShortcuts | shape |
{ focused: true, global: false} |
|
tooltips | shape |
{ controls: false, seek: true} |
|
duration | number |
null |
|
displayDuration | bool |
☑️true |
|
storage | shape |
{ enabled: true, key: 'plyr_volume'} |
Support
Please open an issue for support.
Contributing
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.