Preview image for uploaded videos

endpointsystems

Is there a way, programmatically or otherwise, where one could build a process to get a snippet of a video to use as a preview image?

Users on my platform have an image gallery, and I'd like to have the option to upload videos. For the videos, I'd like to have a static image in the gallery, preferably with a play button overlay, and when they click on the image, they get a dialog that plays the video.

When a user uploads a video to my platform it's highly likely to be something they've posted on Instagram or TikTok. I have little to no foreknowledge of the video getting loaded. I'd like to find a way to capture an image of maybe the first second or so of the video for the preview — or, if the upload process already does this, even better.

Is there a way to set up an eager transform and/or a webhook or something to get this information?

Wissam

Hi @endpointsystems ,

Cloudinary makes it easy to extract a frame from a video and deliver it as an image by simply specifying the desired image format as the file extension of the URL (e.g. jpg, png, webp, avif), and optionally the desired frame (specified by a time offset from the start of the video). This is an effective way to produce a poster image for your video.
For example, here is a video :
https://res.cloudinary.com/demo/video/upload/docs/walking_talking.mp4

If I will change the file extension to jpg, I will receive a poster:
https://res.cloudinary.com/demo/video/upload/docs/walking_talking.jpg

You can read more about it in the following documentation:
https://cloudinary.com/documentation/video_effects_and_enhancements#video_thumbnails

You can apply eager transformation and it is also possible to apply transformation using .Net code as well, for example:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.StartOffset("auto").Chain()
.Gravity("auto").Height(350).Width(350).Crop("fill").Chain()
.Border("5px_solid_black").Radius(20).Chain()
.Effect("grayscale")).BuildImageTag("docs/walking_talking.jpg")

The URL will be the following:

https://res.cloudinary.com/demo/video/upload/so_auto/c_fill,g_auto,h_350,w_350/bo_5px_solid_black,r_20/e_grayscale/docs/walking_talking.jpg

I hope this is helpful!
Please let me know if you have additional questions.

Regards,

Wissam

endpointsystems

Love it - thanks!