Cloudinary Blog

Automated Generation of Intelligent Video Previews on Cloudinary’s Dynamic Video Platform

Automated Generation of Intelligent Video Previews

It’s human nature for most to want a sneak peek at upcoming content whenever possible. Think movie trailers or the “on next week’s episode” part of your favorite show. For video producers, an essential goal is to attract more views and clickthroughs.

Time is precious, however, so viewers invariably want to ensure that a video is relevant for them before watching it. A simple thumbnail is often not adequate to convey enough details of a video; this is where a short video preview could prove to be much more effective.

Cloudinary offers intelligent automatic generation of video previews to give viewers a preliminary look at the most interesting content. A powerful feature well worth adopting. All you need to do is add the preview effect (e_preview in URLs), like this:

Ruby:
Copy to clipboard
cl_image_tag("baking_pastries", :effect=>"preview", :resource_type=>"video")
PHP v1:
Copy to clipboard
cl_image_tag("baking_pastries", array("effect"=>"preview", "resource_type"=>"video"))
PHP v2:
Copy to clipboard
(new VideoTag('baking_pastries'))
  ->videoEdit(VideoEdit::preview());
Python:
Copy to clipboard
CloudinaryVideo("baking_pastries").image(effect="preview")
Node.js:
Copy to clipboard
cloudinary.image("baking_pastries", {effect: "preview", resource_type: "video"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("preview")).resourceType("video").imageTag("baking_pastries");
JS:
Copy to clipboard
cloudinary.videoTag('baking_pastries', {effect: "preview"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("baking_pastries", {effect: "preview", resource_type: "video"})
React:
Copy to clipboard
<Video publicId="baking_pastries" resourceType="video">
  <Transformation effect="preview" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="baking_pastries" resourceType="video">
  <cld-transformation effect="preview" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="baking_pastries" resource-type="video">
  <cl-transformation effect="preview">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("preview")).BuildImageTag("baking_pastries")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("preview")).resourceType("video").generate("baking_pastries");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("preview")).generate("baking_pastries")


Sign up for Cloudinary free today!


Why Static Thumbnails Just Aren’t Enough

As a rule, developers spotlight videos on web and mobile apps with thumbnails. The simplest way to do this is with the video poster, which is often the first frame of the video—an image that could show nothing or be completely irrelevant to the video content, however. Not great for garnering more views!

Why not extract a relevant poster image from the video or create a completely different but eye-catching image instead? Many YouTube videos use the latter to try and grab your attention. Both options are time-consuming, manual jobs, though. In the case of managing a multitude of videos, especially if they are created by third parties, automation is the answer.

Below are some examples of the various approaches to creating poster images:


First frame

First frame

Middle frame

Middle frame

Manually selected frame

Manually selected frame

Custom thumbnail

Custom thumbnail


Bringing Thumbnails to Life

For a richer user experience with thumbnails, the best solution is to make them move. You could play a short preview of the video content on thumbnail hover. That setup has proven to be extremely effective in increasing engagement, leading to more views of the full video.

Similar to creating thumbnails, generating short video previews is often a manual, time-consuming process. The following are two common options:

  1. Take a few seconds from the video, either at the beginning or the middle. That’s a formulaic, but by far not ideal solution.
  2. Pick the most engrossing moments that last a few seconds from the video. In many cases, you must extract those moments from several scenes, necessitating more time and effort.

The case for a more efficient solution for spotlighting videos is obvious.

First three seconds

Middle three seconds

Custom selected three seconds

Custom edited preview

Getting Smart With Video Previews

We’ve already established that video previews showing the most important content in a video provides the best experience for users. It’s just the question of how to generate these previews automatically. Cloudinary’s capability for automatically generating video previews solves this question and allows you to customize it to match your needs. Through advanced AI and machine-learning techniques, Cloudinary analyzes each video frame, assigns it an importance score, and creates a preview. To trigger that process, simply add the preview effect (e_preview in URLs).

Here's how this looks for our rocket launch video:

Ruby:
Copy to clipboard
cl_image_tag("rocket_launch", :effect=>"preview", :resource_type=>"video")
PHP v1:
Copy to clipboard
cl_image_tag("rocket_launch", array("effect"=>"preview", "resource_type"=>"video"))
PHP v2:
Copy to clipboard
(new VideoTag('rocket_launch'))
  ->videoEdit(VideoEdit::preview());
Python:
Copy to clipboard
CloudinaryVideo("rocket_launch").image(effect="preview")
Node.js:
Copy to clipboard
cloudinary.image("rocket_launch", {effect: "preview", resource_type: "video"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("preview")).resourceType("video").imageTag("rocket_launch");
JS:
Copy to clipboard
cloudinary.videoTag('rocket_launch', {effect: "preview"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("rocket_launch", {effect: "preview", resource_type: "video"})
React:
Copy to clipboard
<Video publicId="rocket_launch" resourceType="video">
  <Transformation effect="preview" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="rocket_launch" resourceType="video">
  <cld-transformation effect="preview" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="rocket_launch" resource-type="video">
  <cl-transformation effect="preview">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("preview")).BuildImageTag("rocket_launch")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("preview")).resourceType("video").generate("rocket_launch");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("preview")).generate("rocket_launch")

Note
We recommend adding the preview effect on upload as an eager transformation to ensure that Cloudinary completes the analysis before delivery (or alternatively use the explicit method before delivery on a video already in your account).

Cloudinary’s initial smart preview functionality created a preview using a single segment from the video, which works well for short and simple videos, such as stock or social ones. The feature has now been enhanced to select multiple segments from the most relevant parts of the original video before generating the preview.

For long videos, e.g., lectures, sports matches, and training classes, consider overriding the default number of segments and their minimum duration by setting the max_seg and min_seg_dur parameters. Below is a video preview from Cloudinary CEO Itai Lahan's 2019 ImageCon talk, with five segments, each three seconds long:

Ruby:
Copy to clipboard
cl_image_tag("2019_imagecon_itai", :effect=>"preview:duration_15:max_seg_5:min_seg_dur_3", :resource_type=>"video")
PHP v1:
Copy to clipboard
cl_image_tag("2019_imagecon_itai", array("effect"=>"preview:duration_15:max_seg_5:min_seg_dur_3", "resource_type"=>"video"))
PHP v2:
Copy to clipboard
(new VideoTag('2019_imagecon_itai'))
  ->videoEdit(VideoEdit::preview()->duration(15)->maximumSegments(5)
    ->minimumSegmentDuration(3));
Python:
Copy to clipboard
CloudinaryVideo("2019_imagecon_itai").image(effect="preview:duration_15:max_seg_5:min_seg_dur_3")
Node.js:
Copy to clipboard
cloudinary.image("2019_imagecon_itai", {effect: "preview:duration_15:max_seg_5:min_seg_dur_3", resource_type: "video"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("preview:duration_15:max_seg_5:min_seg_dur_3")).resourceType("video").imageTag("2019_imagecon_itai");
JS:
Copy to clipboard
cloudinary.videoTag('2019_imagecon_itai', {effect: "preview:duration_15:max_seg_5:min_seg_dur_3"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("2019_imagecon_itai", {effect: "preview:duration_15:max_seg_5:min_seg_dur_3", resource_type: "video"})
React:
Copy to clipboard
<Video publicId="2019_imagecon_itai" resourceType="video">
  <Transformation effect="preview:duration_15:max_seg_5:min_seg_dur_3" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="2019_imagecon_itai" resourceType="video">
  <cld-transformation effect="preview:duration_15:max_seg_5:min_seg_dur_3" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="2019_imagecon_itai" resource-type="video">
  <cl-transformation effect="preview:duration_15:max_seg_5:min_seg_dur_3">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("preview:duration_15:max_seg_5:min_seg_dur_3")).BuildImageTag("2019_imagecon_itai")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("preview:duration_15:max_seg_5:min_seg_dur_3")).resourceType("video").generate("2019_imagecon_itai");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("preview:duration_15:max_seg_5:min_seg_dur_3")).generate("2019_imagecon_itai")

Note
The default number of segments and durations adjusts according to the length of the original video. For details, see the related documentation.

Video Previews In Action

Now that we know how to easily generate intelligent video previews, let’s see them in action. The most common way to start a video preview is to play it when a viewer hovers over its thumbnail. The codepen below shows an example of this:

See the Pen Intelligent Video Previews Demo by Cloudinary (@Cloudinary) on CodePen.

The above example uses multiple Cloudinary Video Player instances for both the small previews and the full videos. The preview players’ controls are hidden, with each video looping continuously, giving the impression that it’s an animated GIF. Because they are smaller than GIFs, those videos load faster, delivering a more optimized experience.

Try it Out for Yourself

Generating intelligent video previews through automation with Cloudinary is as simple as adding the preview effect (e_preview in URLs) to your videos. You can then easily configure the duration and number of segments. Do give it a try. Increase your video engagement by providing more compelling video listings that feature intelligent video previews.

For more information and examples, see the documentation.


Want to Learn More About Video Optimization?

Recent Blog Posts

The Pros and Cons of AVIF for Websites

AVIF is a 2019 spinoff from the AV1 video format developed by the Alliance for Open Media (AOM), whose members include Amazon, Apple, ARM, Facebook, Google, Huawei, Mozilla, Microsoft, Netflix, and Intel. As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP, and is on par with the brand-new JPEG-XL format, which does not work on any browser yet.

Read more
Get Your Media Moving Faster with Cloudinary’s Media Optimizer

So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...

Read more
How to Tap Into the Value of User-Generated Content (UGC)

User-generated content (UGC) took off with, first of all, the advent of the internet and, subsequently, social networks. Everyday consumers were given keys to the kingdom, so to speak, so that they, too, could compose and post content, simultaneously engaging with others online. Twitter, Facebook, Instagram, Snapchat, TikTok—the networks through which we can create and publish content have grown exponentially, and brands are becoming aware of the benefits of tapping into the gold mines offered by those networks.

Read more
Identifying Countries by IP Address in Columnar Databases Through SQL

Cloudinary reaps a myriad of open web traffic, from ad networks to e-commerce sites. Our Data Science team is dedicated to analyzing the data for use internally and externally.

A glance at any General Data Protection Regulation (GDPR) article would reveal that—unlike Android device IDs (AID), through which users can reset their web address—keeping user identifiers, such as Internal Protocol (IP) and Media Access Control (MAC) addresses, as well as International Mobile Equipment Identity (IMEI), violates privacy. As a solution, you can discard all privacy identifications or make them visible to users for reset.

Read more
Digital-First Asset Management Explained

As the world changes, so does technology. I don’t need to name more than a handful of antiquated technologies before you nod in agreement: floppy disks, Walkmans, phone booths, VHS tapes, each of which have been phased out or rendered useless by new solutions that meet the same need but much more effectively.

Read more