Cloudinary Blog

Auto-Generate Video Previews with Great Results Every Time

Auto-Generate Video Previews with Great Results Every Time

If you are an avid YouTube viewer or a Netflix binger, you might have noticed some fascinating changes in their latest preview thumbnails. They sure are attention grabbing, aren’t they?

Video previews are becoming more and more popular, not the least because they entice viewers, attract clickthroughs and, more often than not, gain a happy and loyal audience. Problem is, the task sounds like an art in itself. Just how can you go about creating appealing video previews without having to rely on movie professionals? Have you ever wished that you could quickly create video previews like those on YouTube and Netflix, but still rest assured that they'll include the good stuff?

In response to the requests from many Cloudinary users for such a capability, we are announcing today Smart Video Previews (Beta). You can now automate the process of producing cool previews—and at scale!

The automated video preview-generation feature is based on advanced AI and Deep Learning techniques, which have been yielding compelling results for a while. Our Deep Learning algorithms determine which segments in the original video would appeal to humans and create video previews using those segments. You can then additionally transform and manipulate those previews by means of the robust transformation techniques offered by Cloudinary. The process is intuitive, fast, and simple, without the need for professional video editors.

How it works

In true Cloudinary fashion, you can easily generate these interest-grabbing, AI-based video previews with our SDKs. Just apply the e_preview transformation effect to your delivery URL. Here's the one-liner of code you need to generate the preview shown below on the right based on the original video shown on the left.

Ruby:
cl_video_tag("People_Surfing", :effect=>"preview:duration_8")
PHP:
cl_video_tag("People_Surfing", array("effect"=>"preview:duration_8"))
Python:
CloudinaryVideo("People_Surfing").video(effect="preview:duration_8")
Node.js:
cloudinary.video("People_Surfing", {effect: "preview:duration_8"})
Java:
cloudinary.url().transformation(new Transformation().effect("preview:duration_8")).videoTag("People_Surfing");
JS:
cloudinary.videoTag('People_Surfing', {effect: "preview:duration_8"}).toHtml();
jQuery:
$.cloudinary.video("People_Surfing", {effect: "preview:duration_8"})
React:
<Video publicId="People_Surfing" >
  <Transformation effect="preview:duration_8" />
</Video>
Angular:
<cl-video public-id="People_Surfing" >
  <cl-transformation effect="preview:duration_8">
  </cl-transformation>
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("preview:duration_8")).BuildVideoTag("People_Surfing")
Android:
MediaManager.get().url().transformation(new Transformation().effect("preview:duration_8")).resourceType("video").generate("People_Surfing.mp4");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("preview:duration_8")).generate("People_Surfing.mp4")

Original (39 sec)

 

Preview (8 sec)

Did you notice that out of nearly 40 seconds of somewhat repetitive surf video, the deep learning algorithms behind this feature automatically created an 8 second video including one nice wave ride and one really 'impressive' crash?

Preview on hover

If you want to get a bit more sophisticated, you can add a bit of JavaScript to achieve that increasingly popular use-case of activating video previews when a user hovers over video thumbnails in a website.

In the example below, mousing over the thumbnail activates the preview, mouse out reverts back to the thumbnail, and clicking it replaces the thumbnail (poster) with the original video, auto-playing inside the Cloudinary Video Player.

Want to give it a shot? Here's the code we used for the above example to get you started:

<video onmouseover="motion()" onmouseout="still()" width="400" id="demo-animation" controls muted class="cld-video-player cld-video-player-skin-dark">
</video>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.js"></script>

<script type="text/javascript" src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.js"></script>
<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">


<script type="text/javascript">
var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
var player = cld.videoPlayer('demo-animation', {videojs: { bigPlayButton: false } }).width(300);
var videoPlaying = false;
player.on("playing", playingEvent);
player.source("snow_deer");

function playingEvent() {
    videoPlaying = true;
}
function motion() {
    if(videoPlaying == false)
        player.source("snow_deer", {poster: {publicId: "snow-deer-gif.gif"}});
}
function still() {
    if(videoPlaying == false)
        player.source("snow_deer");
}

</script>

Join the Beta

Have we piqued your interest? If so, take a look at the video preview documentation, sign up to take part in the Beta program and have a whirl. As with all deep learning algorithms, the preview feature will continuously improve as we incorporate feedback from you on real-life use cases. We can’t wait to see your creations and to hear your take. Do send them to us in the Comments section below.

Recent Blog Posts

The Visual Media Report: Visual Engagement and User Experience

With privacy top of mind, we wondered what we might learn from analyzing the large volume of data. What user behaviors would we discover, what regional differences might exist? What insights or early hints from different industries could we extrapolate? These questions guided us as we analyzed millions of anonymous end-user experiences and asset interactions across our platform.

Read more
How a Cloud-native DAM Platform Optimizes Customer Experiences

In today’s digital age, brands rely heavily on rich media to tell stories, foster engagement, and make emotional connections that drive results. Marketers use videos and images, tuned to customers’ interests, to create dynamic visual experiences. Digital campaigns about trips to Florida, for instance, have separate plot lines, depending on audiences’ passions for golf, deep sea fishing, or kid-friendly versus romantic getaways. Marketers expect to detect preferences, produce personalized experiences highlighting different desires, and turn digital prospects into vacationing customers. The ultimate success of a marketing campaign relies on the consistent delivery of these customer experiences, at scale.

Read more
Cloudinary’s Media Developer Experts Program

Cloudinary was founded by developers and developer-centric thinking is in our DNA. Our work with developers helps them better understand all things rich-media management and delivery is crucial to us. Now, in an effort to recognize, support, and reward the innovative leaders in that technical community, we’re excited to introduce a new Media Developer Experts (MDE) program! MDEs will leverage the Cloudinary platform to foster a community of media-management professionals; receive training and certifications to become experts within their field or audience; advance the state of media management, adoption, and best practices; and make the web more accessible.

Read more
An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more