Product Updates

Video_preview

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:

Preview Generated:

Ruby:
cl_video_tag("People_Surfing", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:effect=>"preview:duration_8"}
  ])
PHP:
cl_video_tag("People_Surfing", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("effect"=>"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>
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")

Read more details and documentation here

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

← Back to all product updates