Use first frame of video as thumbnail

Question

And it have a props called poster which is working fine. But my requirement is to get that thumbnail from video (first frame of video). If I don't use poster (which accept an url) then it is showing blank screen.

Any idea how to use first frame of video as thumbnail?

Thank You!!!

score 7 · Accepted Answer · answered Jun 15 '21 at 14:35

7

You can use the onLoad function callback to achieve it,

const player = useRef(null);

<Video
  source={{uri: uri}}
  ref={player}
  paused={true}
  style={styles.backgroundVideo}
  onLoad={() => {
    player.current.seek(0); // this will set first frame of video as thumbnail
  }}
/>

For more details on onLoad prop: here

answered Jun 15 '21 at 14:35

imKrishh

762
1
6
11

I believe this is not working anymore! I got undefined every time. – Nilton Schumacher F Aug 24 '22 at 00:14
I had to use 1 instead of 0 to get it working. – Gh05d Jun 02 '23 at 16:50
Is there a way to make a thumbnail on some specific frame/time but when user actually plays the video it starts from the beginning? – Boris Mitioglov Jul 07 '23 at 01:34

Use first frame of video as thumbnail

1 Answers1