React-player: Support for posters?

[Morganjackson]

Is there anyway to set the poster along with the url?

 url={url} poster={poster}

The player is working perfectly except that it often shows a black screen for mp4 videos and doesn't always show the max res for YouTube, so it would be great if we could optionally set the poster manually.

[denisflorkin]

Hello, I'm curious why this issue has been closed? I think the ability to manually set poster might be really useful for the FilePlayer in certain instance. I'm using react-player to play mp3 from Deezer, and the FilePlayer has no idea of the context of this (Deezer and the existence of a linked illustration) so the ability to pass a props poster or ìllustration to just the file player is really interesting imho.
I have a version to propose that allow optionnally passing poster props to FilePlayer but i'm having issue with passing the test

[cookpete]

I have a version to propose that allow optionnally passing poster props to FilePlayer but i'm having issue with passing the test

This is a good idea so I'll reopen the issue, although I think something like passing an attributes object to apply to the video or audio element will cover all use cases, including the currently open PR.

doesn't always show the max res for YouTube

I imagine custom YouTube posters would be quite fiddly as they are rendered inside the YT player frame?

[cookpete]

As of 0.6.0 you can now do:

<ReactPlayer
  url={url}
  fileConfig={{ attributes: { poster: 'poster.jpg' } }}
/>

[denisflorkin]

Indeed great way of killing two birds in one stone, and as of youtube poster customizations, transparent iframe until the initial play of a video to let place to poster but would require a node around the iframe (or maybe pseudo elements), or maybe those new import thing, there may be a way to hack/access the iframe style it, but this become fancy. Also I wonder if it's not possible that

doesn't always show the max res for YouTube

was due to the fact that the max res image was made from a lower video resolution (and would appear consequently crappy) or maybe youtube did not create a max res image because of this reason and was serving the max possible res...

[krismeister]

@denisflorkin the youtube bug you mention is
https://code.google.com/p/gdata-issues/issues/detail?can=2&start=0&num=100&q=&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary&groupby=&sort=&id=4590

its an issue with using the youtube api, which this project needs for all the event proxying.

@CookPete , thanks for the post example, and thank you for making such a great player.

[johnandblue]

Hi, @CookPete I was also interested in putting a poster in a webm file, and I follow your comment:

As of 0.6.0 you can now do:

<ReactPlayer
  url={url}
  fileConfig={{ attributes: { poster: 'poster.jpg' } }}
/>

and it works, but it says: ReactPlayer: fileConfig is deprecated, please use the config prop instead – https://github.com/CookPete/react-player#config-prop
but if I change fileConfig for config as prop, then doesn't recognize the poster...
any recommendation?

---

edit: Answering to myself:

config={ { file: { attributes: { poster: props.backgroundImage.url } } } }

[cookpete]

@johnandblue Yeah the changes to config props are outlined in the readme. 👍