diff --git a/CHANGELOG.md b/CHANGELOG.md index 13fe1e89..2e75e6da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. This projec ### Unreleased +* Fix [YouTube and Vimeo autoplay bug](https://github.com/CookPete/react-player/issues/7) * [Full commit list](https://github.com/CookPete/react-player/compare/v0.2.1...master) diff --git a/README.md b/README.md index 25f63b2f..1a4e2d49 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,13 @@ These props allow you to override the parameters for the various players Prop | Description ---- | ----------- -soundcloudConfig | An object containing configuration for the SoundCloud player. Includes `clientId`, which can be used to override the default `client_id` -vimeoConfig | An object containing configuration for the Vimeo player. Includes `iframeParams`, which maps to the [parameters accepted by the Vimeo iframe player](https://developer.vimeo.com/player/embedding#universal-parameters) -youtubeConfig | An object containing configuration for the YouTube player. Includes `playerVars`, which maps to the [parameters accepted by the YouTube iframe player](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5) +soundcloudConfig | Configuration object for the SoundCloud player. Set `clientId`, to your own SoundCloud app [client ID](https://soundcloud.com/you/apps) +vimeoConfig | Configuration object for the Vimeo player. Set `iframeParams`, to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters). Set `preload` for [preloading](#preloading) +youtubeConfig | Configuration object for the YouTube player. Set `playerVars`, to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5). Set `preload` for [preloading](#preloading) + +##### Preloading + +Both `youtubeConfig` and `vimeoConfig` props can take a `preload` value. Setting this to `true` will play a short, silent video in the background when `ReactPlayer` first mounts. This fixes a [bug](https://github.com/CookPete/react-player/issues/7) where videos would not play when loaded in a background browser tab. ### Methods diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js index 20bd9223..489708f3 100644 --- a/src/ReactPlayer.js +++ b/src/ReactPlayer.js @@ -25,8 +25,17 @@ export default class ReactPlayer extends Component { } renderPlayer = Player => { const active = Player.canPlay(this.props.url) - const props = active ? { ...this.props, ref: 'player' } : {} - return + const { youtubeConfig, soundcloudConfig, vimeoConfig, ...activeProps } = this.props + const props = active ? { ...activeProps, ref: 'player' } : {} + return ( + + ) } render () { const style = { diff --git a/src/players/Base.js b/src/players/Base.js index b1ff9a2a..545ce900 100644 --- a/src/players/Base.js +++ b/src/players/Base.js @@ -9,6 +9,9 @@ export default class Base extends Component { static defaultProps = defaultProps componentDidMount () { this.update() + if (this.props.url) { + this.load(this.props.url) + } } componentWillUnmount () { this.stop() @@ -16,14 +19,12 @@ export default class Base extends Component { } componentWillReceiveProps (nextProps) { // Invoke player methods based on incoming props - if (this.props.url !== nextProps.url) { - if (nextProps.url) { - this.play(nextProps.url) - this.props.onProgress({ played: 0, loaded: 0 }) - } else { - this.stop() - clearTimeout(this.updateTimeout) - } + if (this.props.url !== nextProps.url && nextProps.url) { + this.load(nextProps.url, nextProps.playing) + this.props.onProgress({ played: 0, loaded: 0 }) // Needed? + } else if (this.props.url && !nextProps.url) { + this.stop() + clearTimeout(this.updateTimeout) } else if (!this.props.playing && nextProps.playing) { this.play() } else if (this.props.playing && !nextProps.playing) { @@ -52,7 +53,8 @@ export default class Base extends Component { } onReady = () => { this.setVolume(this.props.volume) - if (this.props.playing) { + if (this.props.playing || this.preloading) { + this.preloading = false this.play() } } diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js index 49b7c582..3f0a11d5 100644 --- a/src/players/FilePlayer.js +++ b/src/players/FilePlayer.js @@ -19,16 +19,18 @@ export default class FilePlayer extends Base { this.player.onpause = this.props.onPause this.player.onended = this.props.onEnded this.player.onerror = this.props.onError - super.componentDidMount() } - play (url) { + load (url) { + this.player.src = url + } + play () { this.player.play() } pause () { this.player.pause() } stop () { - // No need to stop + this.player.src = '' } seekTo (fraction) { this.player.currentTime = this.player.duration * fraction @@ -50,7 +52,6 @@ export default class FilePlayer extends Base { return (