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',