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/src/players/Base.js b/src/players/Base.js index b1ff9a2a..81bf4aa0 100644 --- a/src/players/Base.js +++ b/src/players/Base.js @@ -9,6 +9,10 @@ export default class Base extends Component { static defaultProps = defaultProps componentDidMount () { this.update() + if (!this.props.url && this.prime) { + this.priming = true + this.prime() + } } componentWillUnmount () { this.stop() @@ -52,7 +56,7 @@ export default class Base extends Component { } onReady = () => { this.setVolume(this.props.volume) - if (this.props.playing) { + if (this.props.playing || this.priming) { this.play() } } diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js index a5b8c83d..b9470a35 100644 --- a/src/players/Vimeo.js +++ b/src/players/Vimeo.js @@ -7,6 +7,7 @@ import Base from './Base' const IFRAME_SRC = 'https://player.vimeo.com/video/' const MATCH_URL = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/ const MATCH_MESSAGE_ORIGIN = /^https?:\/\/player.vimeo.com/ +const BLANK_VIDEO_URL = 'https://vimeo.com/127250231' const DEFAULT_IFRAME_PARAMS = { api: 1, autoplay: 0, @@ -39,6 +40,9 @@ export default class Vimeo extends Base { this.postMessage('play') } } + prime () { + this.play(BLANK_VIDEO_URL) + } pause () { this.postMessage('pause') } diff --git a/src/players/YouTube.js b/src/players/YouTube.js index f0bbf924..29253d36 100644 --- a/src/players/YouTube.js +++ b/src/players/YouTube.js @@ -8,6 +8,7 @@ const SDK_URL = '//www.youtube.com/iframe_api' const SDK_GLOBAL = 'YT' const MATCH_URL = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/ const PLAYER_ID = 'youtube-player' +const BLANK_VIDEO_URL = 'https://www.youtube.com/watch?v=GlCmAC4MHek' const DEFAULT_PLAYER_VARS = { autoplay: 0, controls: 0, @@ -64,6 +65,9 @@ export default class YouTube extends Base { if (state.data === YT.PlayerState.BUFFERING) this.props.onBuffer() if (state.data === YT.PlayerState.ENDED) this.props.onEnded() } + prime () { + this.play(BLANK_VIDEO_URL) + } pause () { if (!this.player) return this.player.pauseVideo()