KP-C

Kevin Powell - Community•2y ago•

59 replies

Tenkes

How to generate first frame of video as image?

Hello. I'm working on social network app with Next.js and MongoDB. Users should be able to post images and videos as content (btw all posts in DB have

content

content

field which is array of links to that content, which is either image or video).
I'm facing an issue when trying to display posts to the user. I have a

<PostCard />

<PostCard />

component which renders first element of

content

content

as "thumbnail" and problem occurs when first element is video, which obviously can't be rendered as image. So I was thinking, if first element is video, it should somehow take first frame of that video and use it as thumbnail. But it would probably be bad to render it every time user visits the page, so I was thinking of generating it once when user creates a post, and save it as something like

poster

poster

as separate field in DB. But I have no idea how to do that lol.

Any suggestions/advices/opinions?