CODEWITHSUNDEEP
javascriptreactjsvideoreact-player
CosmicSeizure
CosmicSeizure

Reputation: 1514

React Player Thumbnail

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.

Upvotes: 10

Views: 36619

Answers (5)

Dhruvil M
Dhruvil M

Reputation: 11

Use the light prop to set thubnail image to the player.

<ReactPlayer                                                    
   url={videoUrl}
   light={thumbnailUrl}
   playing
   controls
/>

Note: The light prop will render a video thumbnail with default play icon, and only load the full video once a user has interacted with the image. For more details please check react-payer npm https://www.npmjs.com/package/react-player

Upvotes: 1

shmuel
shmuel

Reputation: 121

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.

Upvotes: 0

Jeanne vie
Jeanne vie

Reputation: 524

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

Upvotes: 2

RubbelDieKatz
RubbelDieKatz

Reputation: 1187

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

Upvotes: 12

Prabhanshu tiwari
Prabhanshu tiwari

Reputation: 26

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/

Upvotes: 0

Related Questions