React Player Thumbnail

Question

i am using react-player for playing videos. Not sure if there are any better options, but this seems to do the job. The only issue i have is, that i need to get thumbnails for the videos. Any idea how i would go around it ?

If you know about some better option for playing videos in React web app with supported thumbnails, that would be also great.

<ReactPlayer                                                    
 className="videoFrame"
 url={url}
 playing
 controls
/>

Thanks

Edit: I ended up using the video itself as thumbnail and blocking all mouse events over it. Then use parent div as button. In case of youtube i replace the video with thumbnail provided by youtube ( https://img.youtube.com ), because of the big play button over video. Most of other players dont have it.

Solution 1

Use the light prop to supply an image URL to the player.

<ReactPlayer                                                    
 className="videoFrame"
 url={url}
 light="http://placekitten.com/200/300"
 playing
 controls
/>

Solution 2

If you have an specific image that you want to be the thumbnail, you should set the image URL to light:

 <ReactPlayer                                              
       url='https://vimeo.com/243556536'
       light = 'https://sampleimage.com'
       playing
       controls/>

If you want to display the thumbnail of the video, you'll just have to set light to true:

<ReactPlayer                                              
      url='https://vimeo.com/243556536'
      light = {true}
      playing
      controls/>

Check the documentation of react-player on this link: https://www.npmjs.com/package/react-player

Comments

[CosmicSeizure]

Thanks, i am using the react-player, i tried the second one as well, but it was not working that well ( didnt support as many sources ). Could you suggest any way how to capture the first frame of the video ? I would need to do that when user submits the video link.

[Prabhanshu tiwari]

which URL are you using?

[Prabhanshu tiwari]

Please check this link. It may help you also jsfiddle.net/e6w3rtj1

[Jeanne vie]

Why do you need to capture the first frame of the video when you can set the light to true in react-player?

[Ganesh MB]

How to make light always fit hight

[Zach White]

This solution isn't very good. It does not allow video to play on click.