Use first frame of video as thumbnail

Question

I am using react-native-video

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

Professorate

Answer 1

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

Friede

I believe this is not working anymore! I got undefined every time. – Kershaw

I had to use 1 instead of 0 to get it working. – Submariner

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? – Middlebrow