Video previews and posters

Generate AI-based previews that summarize your videos, and extract frames to use as thumbnails or poster images.

AI-based video preview

A video preview is a short excerpt from a video that can be used to engage your audience and help them select the video content that interests them.

The preview transformation effect (e_preview in URLs) generates video previews automatically by activating deep learning algorithms that identify the most interesting video segments. You can optionally control the length of the generated preview using the duration option (default: 5 seconds), and the number and duration of the video segments using the max_seg and min_seg_dur parameters. The three parameters are separated with a colon.

The default number of segments changes if you specify a longer duration, the table below shows the default values:

The following transformation generates a single 5 second preview of this video of elephants walking:

The following transformation generates a 12 second preview with a maximum of 3 segments and a minimum segment duration of 3 seconds from this ImageCon lecture about responsive images by Jason Grigsby:

See full syntax: e_preview in the Transformation Reference.

Try it out: Video preview.

Sample app: Thumbnail previews and embedded video player

A common use case for video previews is to display a selection of different videos as thumbnails, which display a short video preview on hover and open the full video in a video player on click.

The following sample app demonstrates this use case where any clicked thumbnail plays in a <div> containing the Cloudinary Video Player.

Watch the sample app display hover previews and load the selected video:

Explore the app on GitHub.

Return video importance histogram

As part of generating the preview, a video importance histogram is created. This histogram is a JSON representation of the importance score for each frame of the video. You can return this histogram and pass it to an external application or to pick out your own key parts of a video using the importance scores.

To return the histogram, use the fl_getinfo flag with e_preview and remove the file extension. Ensure that you don't include any other transformations. For example, to return the importance histogram for the ImageCon video we used above:

Video preview tips and guidelines

• The preview algorithm analyzes the entire video to determine the ideal segment(s) to use, which means it can take several seconds or minutes, depending on the length of the original video, to generate your preview. Therefore, it's recommended to generate the preview effect transformation eagerly during upload or using an explicit method call for existing videos, along with an eager_notification_url parameter to notify your application when the video preview transformation is ready for delivery.

• Due to the advanced analysis required, video preview generation is not supported as an incoming transformation.

• As explained above, dynamic delivery of this transformation is not relevant in production. However, for experimentation purposes, you can add the e_preview parameter directly to a URL in your browser. In most cases, the immediate result will be a broken video (An HTTP 423 error will be returned). Refresh your browser after several seconds or minutes to see the result. Once the initial analysis has been completed, any subsequent transformations will happen on the fly as usual.

• When generating video previews, keep in mind that the AI algorithm takes the requested preview duration into account when selecting the most relevant content. Therefore, when you set a different preview duration for the same video, different segments of your video may be selected.

• As with any video, you can transcode your generated preview to an animated image (.gif or animated .webp) by changing the URL extension or using the format SDK parameter. Remember that animated images that were transcoded from video (and thus have a resource_type of video) only run a single time by default. If you want the animated image to loop, add a new component to your transformation chain with the loop effect. For example:

  

Video thumbnails

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, generating a JPG image thumbnail URL of the uploaded MP4 video with public ID docs/walking_talking:

By default, the middle frame of the video is used. You can also control which frame is captured from the video as a thumbnail using the start offset qualifier (so in URLs). For example, generating a JPG image thumbnail of the frame at 8.5 seconds from the beginning of the MP4 video:

Another option is to let Cloudinary decide which frame to use as the thumbnail based on color distribution, using automatic start offset (so_auto in URLs):

Once generated, the thumbnail image supports the same transformations as any other image (see image transformations for more details).

For example, generating an automatically cropped JPG image thumbnail with a width and height of 350 pixels, of an automatically selected frame in the uploaded MP4 video named walking_talking. The image is also rendered in grayscale, with rounded corners and a 5 pixel wide black border, resulting in a 360 x 360 final image: