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.


Further Reading on Video Manipulation

Recent Blog Posts

Get More from Your Media with New Magento Extension

Having an eCommerce platform that both provides a seamless and satisfactory shopping experience, while also serving as a powerful back-office system is crucial to business success today.

As a leading eCommerce platform, Magento offers numerous essential features. Additionally, you can leverage its extensions, such as those for dedicated payments and advanced media management, for other purposes. Cloudinary, long a popular Magento extension, just released a new version with the following powerful features:

Read more
Converting Videos to GIFs in Kotlin-Based Android Apps

Among the image formats available today, Graphics Interchange Format (GIF) works for both static and animated images. A popular use of GIF images—commonly called GIFs—is to repeatedly loop motions, which you cannot in real life. Many people have turned themselves into online celebrities through effective application of GIFs.

Read more
Simple Steps to Make Your Site Accessible With Cloudinary

Web accessibility (a11y) is about gaining an insight into—

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can't use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.

Read more