PlaybackRate change feature

src/ReactPlayer.js

@@ -23,6 +23,7 @@ export default class ReactPlayer extends Component {
       this.props.url !== nextProps.url ||
       this.props.playing !== nextProps.playing ||
       this.props.volume !== nextProps.volume ||
+      this.props.playbackRate !== nextProps.playbackRate ||
       this.props.height !== nextProps.height ||
       this.props.width !== nextProps.width ||
       this.props.hidden !== nextProps.hidden

src/demo/App.js

@@ -16,7 +16,8 @@ export default class App extends Component {
     volume: 0.8,
     played: 0,
     loaded: 0,
-    duration: 0
+    duration: 0,
+    playbackRate: 1.0
   }
   load = url => {
     this.setState({
@@ -34,6 +35,10 @@ export default class App extends Component {
   setVolume = e => {
     this.setState({ volume: parseFloat(e.target.value) })
   }
+  setPlaybackRate = e => {
+    console.log(parseFloat(e.target.value))
+    this.setState({ playbackRate: parseFloat(e.target.value) })
+  }
   onSeekMouseDown = e => {
     this.setState({ seeking: true })
   }
@@ -71,6 +76,7 @@ export default class App extends Component {
     const {
       url, playing, volume,
       played, loaded, duration,
+      playbackRate,
       soundcloudConfig,
       vimeoConfig,
       youtubeConfig,
@@ -89,6 +95,7 @@ export default class App extends Component {
             height={270}
             url={url}
             playing={playing}
+            playbackRate={playbackRate}
             volume={volume}
             soundcloudConfig={soundcloudConfig}
             vimeoConfig={vimeoConfig}
@@ -111,6 +118,9 @@ export default class App extends Component {
               <td>
                 <button onClick={this.stop}>Stop</button>
                 <button onClick={this.playPause}>{playing ? 'Pause' : 'Play'}</button>
+                <button onClick={this.setPlaybackRate} value={1}>1</button>
+                <button onClick={this.setPlaybackRate} value={1.5}>1.5</button>
+                <button onClick={this.setPlaybackRate} value={2}>2</button>
               </td>
             </tr>
             <tr>

src/players/Base.js

@@ -23,7 +23,7 @@ export default class Base extends Component {
     this.mounted = false
   }
   componentWillReceiveProps (nextProps) {
-    const { url, playing, volume } = this.props
+    const { url, playing, volume, playbackRate } = this.props
     // Invoke player methods based on incoming props
     if (url !== nextProps.url && nextProps.url) {
       this.seekOnPlay = null
@@ -38,6 +38,8 @@ export default class Base extends Component {
       this.pause()
     } else if (volume !== nextProps.volume) {
       this.setVolume(nextProps.volume)
+    } else if (playbackRate !== nextProps.playbackRate) {
+      this.setPlaybackRate(nextProps.playbackRate)
     }
   }
   shouldComponentUpdate (nextProps) {
@@ -53,8 +55,9 @@ export default class Base extends Component {
     }
   }
   onPlay = () => {
-    const { volume, onStart, onPlay, onDuration } = this.props
+    const { volume, onStart, onPlay, onDuration, playbackRate } = this.props
     if (this.startOnPlay) {
+      this.setPlaybackRate(playbackRate)
       this.setVolume(volume)
       onStart()
       this.startOnPlay = false

src/players/FilePlayer.js

@@ -51,6 +51,9 @@ export default class FilePlayer extends Base {
   setVolume (fraction) {
     this.player.volume = fraction
   }
+  setPlaybackRate (rate) {
+    this.player.playbackRate = rate
+  }
   getDuration () {
     if (!this.isReady) return null
     return this.player.duration

src/players/Vimeo.js

@@ -60,6 +60,9 @@ export default class Vimeo extends Base {
   setVolume (fraction) {
     this.postMessage('setVolume', fraction)
   }
+  setPlaybackRate (rate) {
+    this.postMessage('setPlaybackRate', rate)
+  }
   getDuration () {
     return this.duration
   }

src/players/YouTube.js

@@ -120,6 +120,10 @@ export default class YouTube extends Base {
     if (!this.isReady || !this.player.setVolume) return
     this.player.setVolume(fraction * 100)
   }
+  setPlaybackRate (rate) {
+    if (!this.isReady || !this.player.setPlaybackRate) return
+    this.player.setPlaybackRate(rate)
+  }
   getDuration () {
     if (!this.isReady || !this.player.getDuration) return null
     return this.player.getDuration()

src/props.js

@@ -8,6 +8,7 @@ export const propTypes = {
   loop: bool,
   controls: bool,
   volume: number,
+  playbackRate: number,
   width: oneOfType([ string, number ]),
   height: oneOfType([ string, number ]),
   hidden: bool,
@@ -45,6 +46,7 @@ export const defaultProps = {
   loop: false,
   controls: false,
   volume: 0.8,
+  playbackRate: 1.0,
   width: 640,
   height: 360,
   hidden: false,