diff --git a/README.md b/README.md index 9afd74b..28ad6c9 100644 --- a/README.md +++ b/README.md @@ -65,12 +65,12 @@ Prop | Description | Default `url` | The url of a video or song to play `playing` | Set to `true` or `false` to pause or play the media | `false` `loop` | Set to `true` or `false` to loop the media | `false` -`controls` | Set to `true` or `false` to display native player controls
*Note: Vimeo, Twitch and Wistia player controls are not configurable and will always display* | `false` -`volume` | Sets the volume of the appropriate player | `0.8` -`muted` | Mutes the player | `false` -`playbackRate` | Sets the playback rate of the appropriate player
*Note: Only supported by YouTube, Wistia, and file paths* | `1` -`width` | Sets the width of the player | `640px` -`height` | Sets the height of the player | `360px` +`controls` | Set to `true` or `false` to display native player controls
  ◦  Vimeo, Twitch and Wistia player will always display controls | `false` +`volume` | Set the volume of the player, between `0` and `1`
  ◦  `null` uses default volume on all players [`#357`](https://github.com/CookPete/react-player/issues/357) | `null` +`muted` | Mutes the player
  ◦  Only works if `volume` is set | `false` +`playbackRate` | Set the playback rate of the player
  ◦  Only supported by YouTube, Wistia, and file paths | `1` +`width` | Set the width of the player | `640px` +`height` | Set the height of the player | `360px` `style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}` `progressInterval` | The time between `onProgress` callbacks, in milliseconds | `1000` `playsinline` | Applies the `playsinline` attribute where supported | `false` diff --git a/src/Player.js b/src/Player.js index ac9ed79..821e7a3 100644 --- a/src/Player.js +++ b/src/Player.js @@ -32,6 +32,7 @@ export default class Player extends Component { const { url, playing, volume, muted, playbackRate } = this.props if (url !== nextProps.url) { this.isLoading = true + this.startOnPlay = true this.onDurationCalled = false this.player.load(nextProps.url, this.isReady) } @@ -41,11 +42,13 @@ export default class Player extends Component { if (playing && !nextProps.playing && this.isPlaying) { this.player.pause() } - if (volume !== nextProps.volume && !nextProps.muted) { - this.player.setVolume(nextProps.volume) - } - if (muted !== nextProps.muted) { - this.player.setVolume(nextProps.muted ? 0 : nextProps.volume) + if (nextProps.volume !== null) { + if (volume !== nextProps.volume && !nextProps.muted) { + this.player.setVolume(nextProps.volume) + } + if (muted !== nextProps.muted) { + this.player.setVolume(nextProps.muted ? 0 : nextProps.volume) + } } if (playbackRate !== nextProps.playbackRate && this.player.setPlaybackRate) { this.player.setPlaybackRate(nextProps.playbackRate) @@ -116,8 +119,11 @@ export default class Player extends Component { if (!this.mounted) return this.isReady = true this.isLoading = false - const { onReady, playing } = this.props + const { onReady, playing, volume, muted } = this.props onReady() + if (muted || volume !== null) { + this.player.setVolume(muted ? 0 : volume) + } if (playing) { this.player.play() } @@ -126,7 +132,7 @@ export default class Player extends Component { onPlay = () => { this.isPlaying = true this.isLoading = false - const { volume, muted, onStart, onPlay, playbackRate } = this.props + const { onStart, onPlay, playbackRate } = this.props if (this.startOnPlay) { if (this.player.setPlaybackRate) { this.player.setPlaybackRate(playbackRate) @@ -134,7 +140,6 @@ export default class Player extends Component { onStart() this.startOnPlay = false } - this.player.setVolume(muted ? 0 : volume) onPlay() if (this.seekOnPlay) { this.seekTo(this.seekOnPlay) diff --git a/src/props.js b/src/props.js index 77ea9ea..d7f8495 100644 --- a/src/props.js +++ b/src/props.js @@ -66,7 +66,7 @@ export const defaultProps = { playing: false, loop: false, controls: false, - volume: 0.8, + volume: null, muted: false, playbackRate: 1, width: '640px',