/react-plyr

📺 A React video component based on Plyr

Primary LanguageJavaScriptMIT LicenseMIT

ReactPlyr Video Component

npm npm David Travis license

A React video component based on Plyr.

react-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.