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:
Copy to clipboard
cl_video_tag("People_Surfing", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:effect=>"preview:duration_8"}
  ])
PHP:
Copy to clipboard
cl_video_tag("People_Surfing", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("effect"=>"preview:duration_8")
  )))
Python:
Copy to clipboard
CloudinaryVideo("People_Surfing").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'effect': "preview:duration_8"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("People_Surfing", {transformation: [
  {width: 500, crop: "scale"},
  {effect: "preview:duration_8"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .effect("preview:duration_8")).videoTag("People_Surfing");
JS:
Copy to clipboard
cloudinary.videoTag('People_Surfing', {transformation: [
  {width: 500, crop: "scale"},
  {effect: "preview:duration_8"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("People_Surfing", {transformation: [
  {width: 500, crop: "scale"},
  {effect: "preview:duration_8"}
  ]})
React:
Copy to clipboard
<Video publicId="People_Surfing" >
  <Transformation width="500" crop="scale" />
  <Transformation effect="preview:duration_8" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="People_Surfing" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation effect="preview:duration_8" />
</cld-video>
Angular:
Copy to clipboard
<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:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Effect("preview:duration_8")).BuildVideoTag("People_Surfing")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .effect("preview:duration_8")).resourceType("video").generate("People_Surfing.mp4");
iOS:
Copy to clipboard
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