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.

As a workaround you could display and img tag that you can hide when the video starts playing. Only issue would be to create the image tho — Dinosan0908, Oct 16 '18 at 11:21
Yeah, thats the hard part :) i realy dont know how to go around creating the thumbnail images for all the possible video services ( youtube, vimeo, dailymotion etc. ) — CosmicSeizure, Oct 16 '18 at 11:27
just checked and found this https://www.npmjs.com/package/react-video-thumbnail might help you. Given URL returns you a thumbnail — Dinosan0908, Oct 16 '18 at 11:30

score 12 · Answer 1 · answered Sep 10 '19 at 08:52

12

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
/>

answered Sep 10 '19 at 08:52

RubbelDieKatz

1,134
1
15
32

1

How to make ```light``` always fit hight – Ganesh MB Jun 29 '21 at 09:35
This solution isn't very good. It does not allow video to play on click. – Zach White Nov 03 '21 at 22:27

score 3 · Answer 2 · answered Feb 12 '20 at 05:25

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

score 0 · Answer 3 · answered Oct 16 '18 at 11:29

0

You need to capture first frame of video as image than save it and use. But this used when you are working with image processing. I am recommending following options Please check here- https://www.npmjs.com/package/react-player otherwise use go through this link- https://video-react.js.org/

answered Oct 16 '18 at 11:29

Prabhanshu tiwari

26
4

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. – CosmicSeizure Oct 16 '18 at 11:41
1

which URL are you using? – Prabhanshu tiwari Oct 18 '18 at 13:23
Please check this link. It may help you also https://jsfiddle.net/e6w3rtj1/ – Prabhanshu tiwari Oct 18 '18 at 13:24
Why do you need to capture the first frame of the video when you can set the light to true in react-player? – Jeanne vie Mar 02 '20 at 02:34

score 0 · Answer 4 · answered Feb 26 '23 at 04:20

If you are trying to add a pester image, then they have something built-in.

    <Player
      poster="/assets/poster.png"
      src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
    />

here is where i found it . I was looking for somthing els, came aross this and then your post, so I thought I'd share it.

React Player Thumbnail

4 Answers4