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.

cl_video_tag("People_Surfing", :effect=>"preview:duration_8")

cl_video_tag("People_Surfing", array("effect"=>"preview:duration_8"))

CloudinaryVideo("People_Surfing").video(effect="preview:duration_8")

cloudinary.video("People_Surfing", {effect: "preview:duration_8"})

cloudinary.url().transformation(new Transformation().effect("preview:duration_8")).videoTag("People_Surfing");

cloudinary.videoTag('People_Surfing', {effect: "preview:duration_8"}).toHtml();

$.cloudinary.video("People_Surfing", {effect: "preview:duration_8"})

<Video publicId="People_Surfing" >
  <Transformation effect="preview:duration_8" />
</Video>

<cl-video public-id="People_Surfing" >
  <cl-transformation effect="preview:duration_8">
  </cl-transformation>
</cl-video>

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("preview:duration_8")).BuildVideoTag("People_Surfing")

MediaManager.get().url().transformation(new Transformation().effect("preview:duration_8")).resourceType("video").generate("People_Surfing.mp4");

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("preview:duration_8")).generate("People_Surfing.mp4")

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.