Product Updates

AI-Based Video Preview Feature

Dec 27, 2018

The Smart Video Previews Feature allows you to automatically generate preview video clips based on algorithms that determine which segments in the original video are most appealing. You can then additionally transform and manipulate those previews if you wish.

You can utilize this new preview manipulation to create a short video for your app feed for fast video loading (instead of loading the full video), or to add video previews when a user hovers over video thumbnails in a website.

Generate these video previews with our SDKs, by applying the e_preview transformation effect to your delivery URL.

Original Video:

https://res.cloudinary.com/demo/video/upload/w_500/People_Surfing.mp4

Preview Generated:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_500/e_preview:duration_8/People_Surfing.mp4

Ruby:

cl_video_tag("People_Surfing", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:effect=>"preview:duration_8"}
  ])

PHP v1:

cl_video_tag("People_Surfing", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("effect"=>"preview:duration_8")
  )))

PHP v2:

(new VideoTag('People_Surfing.mp4'))
  ->resize(Resize::scale()->width(500))
  ->videoEdit(VideoEdit::preview()->duration(8));

Python:

CloudinaryVideo("People_Surfing").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'effect': "preview:duration_8"}
  ])

Node.js:

cloudinary.video("People_Surfing", {transformation: [
  {width: 500, crop: "scale"},
  {effect: "preview:duration_8"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .effect("preview:duration_8")).videoTag("People_Surfing");

JS:

cloudinary.videoTag('People_Surfing', {transformation: [
  {width: 500, crop: "scale"},
  {effect: "preview:duration_8"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("People_Surfing", {transformation: [
  {width: 500, crop: "scale"},
  {effect: "preview:duration_8"}
  ]})

React:

<Video publicId="People_Surfing" >
  <Transformation width="500" crop="scale" />
  <Transformation effect="preview:duration_8" />
</Video>

Vue.js:

<cld-video publicId="People_Surfing" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation effect="preview:duration_8" />
</cld-video>

Angular:

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

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Effect("preview:duration_8")).BuildVideoTag("People_Surfing")

Android:

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

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setEffect("preview:duration_8")).generate("People_Surfing.mp4")

As always - we would love to get your feedback and thoughts on this new, awesome feature :)

← Back to all product updates