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

Rotating Or Removing Image Backgrounds With Cloudinary

As a rule, user interfaces, whether for mobile or desktop apps, encompass a significant amount of visual media (images and videos), necessitating close collaboration among designers and front-end developers. The process for building UIs entails a designer-to-developer handoff, at which the designer transfers to the developer blueprints produced with such tools as Photoshop, InVision, and Sketch. The developer then implements the blueprints with Cascading Style Sheets (CSS).

Read more

Open Hack Week: Building for the Future

By Obinna Ekwuno
Open Hack Week in Lagos, Nigeria: Building for the Future

Between July 29 and August 3, the Google Developer Student Community of the University of Lagos, Nigeria participated in a week-long hackathon called Open Hack Week (OHW). Sponsored by Cloudinary, Interswitch, the Ogundipe Foundation, and other notable organizations, OHW comprised 14 teams, five developers each. After six days of brainstorming and coding, the teams successfully built the minimum viable products (MVPs) for their projects, which they subsequently presented to all the attendees.

Read more
Compress Images for Web and Boost Performance on Your Site

Slow-loading web content and problematic media displays that involve seemingly interminable scrolling tick off users to no end. Compressing online images is, without question, a critical task for spearheading customer retention for websites. Keep in mind that small images can still look sharp. This article shows you how to achieve that by mastering the techniques of compressing images for the web.

Read more
Customize your video player with Cloudinary Studio

Steve Forbes, editor of Forbes Magazine, once said, “Your brand is the single most-important investment you can make in your business”. That bold statement is spot on, especially with respect to digital media. Furthermore, consistency in brand experience is crucial for building trust with users.

Read more
How to Create WordPress Responsive Images

With the advent of technology and the attendant fast-growing demand for feature-rich computing devices (laptops, smartphones, iPads), their manufacturers are rising to the occasion by producing high-resolution machines with screens of various sizes and device-pixel ratios. Thus was born the impetus behind the need for and creation of responsive images, which automatically optimize their online display according to the size and resolution of the device screen, ensuring sharpness and crispness—a delightful user experience.

Read more