Playback Rate (#48)

* add support for video playback rate

* add playback rate to demo

* add playback rate to docs

* chore(build): add new code to dist

* fix(video): don't pass invalid prop to HTML5 tag

* fix(video): actually don't pass the prop this time. Oops

* remove(events): remove onPlaybackRateChange event altogether

* chore(build): include in dist

Author: Eric Morris

README.md

@@ -121,6 +121,7 @@ All children components will receive the following properties via props:
 - `paused`
 - `muted`
 - `volume`
+- `playbackRate`
 - `percentageBuffered`
 - `percentagePlayed`
 
@@ -134,6 +135,7 @@ All children components receive the following methods via props:
 - `seek`
 - `fullscreen`
 - `setVolume`
+- `setPlaybackRate`
 
 ## Contributing
 

demo/src/components/index/main/Main.js

@@ -73,6 +73,10 @@ var Main = React.createClass({
         this.refs.video.setVolume(this._volumeInput.valueAsNumber);
     },
 
+    setPlaybackRate() {
+        this.refs.video.setPlaybackRate(this._playbackRateInput.valueAsNumber);
+    },
+
     onProgress() {
         var el = ReactDOM.findDOMNode(this.refs.video).getElementsByTagName('video')[0];
         this.setState({
@@ -141,6 +145,10 @@ var Main = React.createClass({
                                 <Button onClick={this.setVolume}>setVolume</Button>
                                 <input className="main__input" defaultValue="1" ref={(c) => this._volumeInput = c} type="number" min="0" max="1" step="0.1"/>
                             </li>
+                            <li>
+                                <Button onClick={this.setPlaybackRate}>setPlaybackRate</Button>
+                                <input className="main__input" defaultValue="1" ref={(c) => this._playbackRateInput = c} type="number" min="0.5" max="2" step="0.25"/>
+                            </li>
                             <li>
                                 <Button onClick={this.fullscreen}>fullscreen</Button>
                             </li>

dist/ReactHtml5Video.js

@@ -173,6 +173,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            paused: !this.props.autoPlay,
 	            muted: !!this.props.muted,
 	            volume: 1,
+	            playbackRate: 1,
 	            error: false,
 	            loading: false
 	        };
@@ -339,6 +340,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 	    },
 
+	    /**
+	     * Sets the video playback rate.
+	     * @param  {number} rate The playback rate (default 1.0).
+	     * @return {undefined}
+	     */
+	    setPlaybackRate: function setPlaybackRate(rate) {
+	        this.videoEl.playbackRate = rate;
+	        this.updateStateFromVideo();
+	    },
+
 	    /**
 	     * Updates the React component state from the DOM video properties.
 	     * This is where the magic happens.
@@ -353,6 +364,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            paused: this.videoEl.paused,
 	            muted: this.videoEl.muted,
 	            volume: this.videoEl.volume,
+	            playbackRate: this.videoEl.playbackRate,
 	            readyState: this.videoEl.readyState,
 
 	            // Non-standard state computed from properties
@@ -381,7 +393,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            unmute: this.unmute,
 	            seek: this.seek,
 	            fullscreen: this.fullscreen,
-	            setVolume: this.setVolume
+	            setVolume: this.setVolume,
+	            setPlaybackRate: this.setPlaybackRate
 	        }, this.state, { copyKeys: this.props.copyKeys });
 
 	        var controls = _react2['default'].Children.map(this.props.children, function (child) {

src/components/video/Video.js

@@ -65,6 +65,7 @@ var Video = React.createClass({
             paused: !this.props.autoPlay,
             muted: !!this.props.muted,
             volume: 1,
+            playbackRate: 1,
             error: false,
             loading: false
         };
@@ -231,6 +232,16 @@ var Video = React.createClass({
         }
     },
 
+    /**
+     * Sets the video playback rate.
+     * @param  {number} rate The playback rate (default 1.0).
+     * @return {undefined}
+     */
+    setPlaybackRate(rate) {
+        this.videoEl.playbackRate = rate;
+        this.updateStateFromVideo();
+    },
+
     /**
      * Updates the React component state from the DOM video properties.
      * This is where the magic happens.
@@ -245,6 +256,7 @@ var Video = React.createClass({
             paused: this.videoEl.paused,
             muted: this.videoEl.muted,
             volume: this.videoEl.volume,
+            playbackRate: this.videoEl.playbackRate,
             readyState: this.videoEl.readyState,
 
             // Non-standard state computed from properties
@@ -273,7 +285,8 @@ var Video = React.createClass({
             unmute: this.unmute,
             seek: this.seek,
             fullscreen: this.fullscreen,
-            setVolume: this.setVolume
+            setVolume: this.setVolume,
+            setPlaybackRate: this.setPlaybackRate,
         }, this.state, {copyKeys: this.props.copyKeys});
 
         var controls = React.Children.map(this.props.children, (child) => {