plyr for react js
import React from 'react'
import PropTypes from 'prop-types'
import plyr from 'plyr'
import 'plyr/dist/plyr.css'
class PlyrComponent extends React.Component {
componentDidMount() {
this.player = new plyr('.js-plyr', this.props.options)
this.player.source = this.props.sources
}
componentWillUnmount() {
this.player.destroy()
}
render() {
return (
<video className='js-plyr plyr'>
</video>
)
}
}
PlyrComponent.defaultProps = {
options: {
controls: [
'rewind',
'play',
'fast-forward',
'progress',
'current-time',
'duration',
'mute',
'volume',
'settings',
'fullscreen',
],
i18n: {
restart: 'Restart',
rewind: 'Rewind {seektime}s',
play: 'Play',
pause: 'Pause',
fastForward: 'Forward {seektime}s',
seek: 'Seek',
seekLabel: '{currentTime} of {duration}',
played: 'Played',
buffered: 'Buffered',
currentTime: 'Current time',
duration: 'Duration',
volume: 'Volume',
mute: 'Mute',
unmute: 'Unmute',
enableCaptions: 'Enable captions',
disableCaptions: 'Disable captions',
download: 'Download',
enterFullscreen: 'Enter fullscreen',
exitFullscreen: 'Exit fullscreen',
frameTitle: 'Player for {title}',
captions: 'Captions',
settings: 'Settings',
menuBack: 'Go back to previous menu',
speed: 'Speed',
normal: 'Normal',
quality: 'Quality',
loop: 'Loop',
},
},
sources: {
type: 'video',
sources: [
{
src: '/path/to/movie.mp4',
type: 'video/mp4',
size: 720,
},
{
src: '/path/to/movie.webm',
type: 'video/webm',
size: 1080,
},
],
}
}
PlyrComponent.propTypes = {
options: PropTypes.object,
sources: PropTypes.object,
source: PropTypes.func,
destroy: PropTypes.func
}
export default PlyrComponent