Image fallback

[blinqwebstudio]

First of all: great component!
I've searched the web but didn't find this anywhere; would it be possible to use an image fallback for a) to show during initial load and b) to show in case the video doesn't load for whatever reason?

[floydnoel]

@blinqwebstudio You can add a poster image, as described in the MDN docs:

poster
A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

[blinqwebstudio]

Ah, I wasn't aware that you can just add

[yuliwna1]

Hi @cookpete! Is there any difference how to enable posters for vimeo videos? Not sure why but a poster attribute doesn't overwrite default settings. Thanks!

[cookpete]

@yuliwna1 Poster images will only work if you are playing file paths, as ReactPlayer just renders a <video> element to play files. Vimeo videos use the Vimeo Player API, which looks like it doesn't support custom poster images.

There is no reason you couldn't just have a ready state in your app, and render your own placeholder image/whatever on top of ReactPlayer when ready is false. Then do

<ReactPlayer 
  onReady={() => this.setState({ ready: true })}
  onError={() => this.setState({ ready: false })}
  // ...
/>

There is already an issue for natively supporting a placeholder image here: #448