Fading in and out (+ visual noise)

By overlaying a video on top of itself, we can create the visual noise effect for a limited period of time. For that we’ll use the noise effect for 3 seconds in the start of the video. Let’s also add e_fade parameter, so the video will also fade in and out.

Original

Fade in & out

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:effect=>"noise:60", :start_offset=>"0", :end_offset=>"3", :overlay=>"video:dog", :flags=>"layer_apply"},
  {:effect=>"fade:2000"},
  {:effect=>"fade:-4000"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("effect"=>"noise:60", "start_offset"=>"0", "end_offset"=>"3", "overlay"=>"video:dog", "flags"=>"layer_apply"),
  array("effect"=>"fade:2000"),
  array("effect"=>"fade:-4000")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'effect': "noise:60", 'start_offset': "0", 'end_offset': "3", 'overlay': "video:dog", 'flags': "layer_apply"},
  {'effect': "fade:2000"},
  {'effect': "fade:-4000"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {effect: "noise:60", start_offset: "0", end_offset: "3", overlay: "video:dog", flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("noise:60").startOffset("0").endOffset("3").overlay(new Layer().publicId("video:dog")).flags("layer_apply").chain()
  .effect("fade:2000").chain()
  .effect("fade:-4000")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {effect: "noise:60", startOffset: "0", endOffset: "3", overlay: new cloudinary.Layer().publicId("video:dog"), flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {effect: "noise:60", start_offset: "0", end_offset: "3", overlay: new cloudinary.Layer().publicId("video:dog"), flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation effect="noise:60" startOffset="0" endOffset="3" overlay="video:dog" flags="layer_apply" />
  <Transformation effect="fade:2000" />
  <Transformation effect="fade:-4000" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation effect="noise:60" startOffset="0" endOffset="3" overlay="video:dog" flags="layer_apply" />
  <cld-transformation effect="fade:2000" />
  <cld-transformation effect="fade:-4000" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation effect="noise:60" start-offset="0" end-offset="3" overlay="video:dog" flags="layer_apply">
  </cl-transformation>
  <cl-transformation effect="fade:2000">
  </cl-transformation>
  <cl-transformation effect="fade:-4000">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("noise:60").StartOffset("0").EndOffset("3").Overlay(new Layer().PublicId("video:dog")).Flags("layer_apply").Chain()
  .Effect("fade:2000").Chain()
  .Effect("fade:-4000")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("noise:60").startOffset("0").endOffset("3").overlay(new Layer().publicId("video:dog")).flags("layer_apply").chain()
  .effect("fade:2000").chain()
  .effect("fade:-4000")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("noise:60").setStartOffset("0").setEndOffset("3").setOverlay("video:dog").setFlags("layer_apply").chain()
  .setEffect("fade:2000").chain()
  .setEffect("fade:-4000")).generate("dog.mp4")
by Maor Gariv

Video overlays

Place a video on top of another by using the overlay parameter while adding the ‘video:’ type to it (l_video in URLs).

Moving video overlay

Video overlay

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:width=>150, :effect=>"accelerate:100", :overlay=>"video:abbey_road"},
  {:gravity=>"west", :start_offset=>"0", :end_offset=>"2", :flags=>"layer_apply"},
  {:overlay=>"video:abbey_road"},
  {:width=>150, :effect=>"accelerate:100", :gravity=>"center", :start_offset=>"2", :end_offset=>"5", :flags=>"layer_apply", :crop=>"scale"},
  {:overlay=>"video:abbey_road"},
  {:width=>150, :effect=>"accelerate:100", :gravity=>"east", :start_offset=>"5", :flags=>"layer_apply", :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("width"=>150, "effect"=>"accelerate:100", "overlay"=>"video:abbey_road"),
  array("gravity"=>"west", "start_offset"=>"0", "end_offset"=>"2", "flags"=>"layer_apply"),
  array("overlay"=>"video:abbey_road"),
  array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"center", "start_offset"=>"2", "end_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale"),
  array("overlay"=>"video:abbey_road"),
  array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"east", "start_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'width': 150, 'effect': "accelerate:100", 'overlay': "video:abbey_road"},
  {'gravity': "west", 'start_offset': "0", 'end_offset': "2", 'flags': "layer_apply"},
  {'overlay': "video:abbey_road"},
  {'width': 150, 'effect': "accelerate:100", 'gravity': "center", 'start_offset': "2", 'end_offset': "5", 'flags': "layer_apply", 'crop': "scale"},
  {'overlay': "video:abbey_road"},
  {'width': 150, 'effect': "accelerate:100", 'gravity': "east", 'start_offset': "5", 'flags': "layer_apply", 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {width: 150, effect: "accelerate:100", overlay: "video:abbey_road"},
  {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"},
  {overlay: "video:abbey_road"},
  {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: "video:abbey_road"},
  {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain()
  .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {gravity: "west", startOffset: "0", endOffset: "2", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "center", startOffset: "2", endOffset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "east", startOffset: "5", flags: "layer_apply", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation width="150" effect="accelerate:100" overlay="video:abbey_road" />
  <Transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" />
  <Transformation overlay="video:abbey_road" />
  <Transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" />
  <Transformation overlay="video:abbey_road" />
  <Transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation width="150" effect="accelerate:100" overlay="video:abbey_road" />
  <cld-transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" />
  <cld-transformation overlay="video:abbey_road" />
  <cld-transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" />
  <cld-transformation overlay="video:abbey_road" />
  <cld-transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation width="150" effect="accelerate:100" overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation gravity="west" start-offset="0" end-offset="2" flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation width="150" effect="accelerate:100" gravity="center" start-offset="2" end-offset="5" flags="layer_apply" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation width="150" effect="accelerate:100" gravity="east" start-offset="5" flags="layer_apply" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(150).Effect("accelerate:100").Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Gravity("west").StartOffset("0").EndOffset("2").Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Width(150).Effect("accelerate:100").Gravity("center").StartOffset("2").EndOffset("5").Flags("layer_apply").Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Width(150).Effect("accelerate:100").Gravity("east").StartOffset("5").Flags("layer_apply").Crop("scale")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain()
  .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(150).setEffect("accelerate:100").setOverlay("video:abbey_road").chain()
  .setGravity("west").setStartOffset("0").setEndOffset("2").setFlags("layer_apply").chain()
  .setOverlay("video:abbey_road").chain()
  .setWidth(150).setEffect("accelerate:100").setGravity("center").setStartOffset("2").setEndOffset("5").setFlags("layer_apply").setCrop("scale").chain()
  .setOverlay("video:abbey_road").chain()
  .setWidth(150).setEffect("accelerate:100").setGravity("east").setStartOffset("5").setFlags("layer_apply").setCrop("scale")).generate("dog.mp4")
by Maor Gariv

Retrieving the audio track from the video

Heard a nice soundtrack and want to have it in your Cloudinary storage on-the-fly? Simply change the extension to any of our supported audio formats - MP3, OGG, WAV and get only the audio channel -

Audio channel -

Ruby:
Copy to clipboard
cloudinary_url("dog.mp3", :resource_type=>"video")
PHP:
Copy to clipboard
Cloudinary::cloudinary_url("dog.mp3", array("resource_type"=>"video"))
Python:
Copy to clipboard
cloudinary.utils.cloudinary_url("dog.mp3", resource_type="video")
Node.js:
Copy to clipboard
cloudinary.url("dog.mp3", {resource_type: "video"})
Java:
Copy to clipboard
cloudinary.url().resourceType("video").generate("dog.mp3")
JS:
Copy to clipboard
cloudinary.url('dog.mp3', {resource_type: 'video'});
jQuery:
Copy to clipboard
$.cloudinary.url("dog.mp3", {resource_type: "video"})
React:
Copy to clipboard
cloudinary.url('dog.mp3', {resource_type: 'video'});
Vue.js:
Copy to clipboard
cloudinary.url('dog.mp3', {resource_type: 'video'});
Angular:
Copy to clipboard
cloudinary.url('dog.mp3', {resource_type: 'video'});
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildUrl("dog.mp3")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("dog.mp3");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp3")
by Maor Gariv

Adding a watermark to a video

A common practice among many of our customers - watermark images or videos to give credit for the owners and/or to protect their high-res original resources.

Original Video

Full video watermark

Mid-video watermark

Ruby:
Copy to clipboard
cl_video_tag("abbey_road")
PHP:
Copy to clipboard
cl_video_tag("abbey_road")
Python:
Copy to clipboard
CloudinaryVideo("abbey_road").video()
Node.js:
Copy to clipboard
cloudinary.video("abbey_road")
Java:
Copy to clipboard
cloudinary.url().videoTag("abbey_road");
JS:
Copy to clipboard
cloudinary.videoTag('abbey_road').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("abbey_road")
React:
Copy to clipboard
<Video publicId="abbey_road" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="abbey_road" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="abbey_road" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("abbey_road")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("abbey_road.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("abbey_road.mp4")

Rotate a video

Rotate a video by setting the angle parameter (a_ in URLs). Positive values for clockwise and negative for counterclockwise. Very useful if you want to change the view from “portrait” to “landscape” when shooting videos in mobile -

90 Degrees

45 Degrees counterclockwise

Ruby:
Copy to clipboard
cl_video_tag("dog", :angle=>90)
PHP:
Copy to clipboard
cl_video_tag("dog", array("angle"=>90))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(angle=90)
Node.js:
Copy to clipboard
cloudinary.video("dog", {angle: 90})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().angle(90)).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {angle: 90}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {angle: 90})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation angle="90" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation angle="90" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation angle="90">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Angle(90)).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().angle(90)).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAngle(90)).generate("dog.mp4")
by Maor Gariv

Animated gif creation

Easily create and manipulate an animated gif from images. First, choose the images you wish to include in the GIF by tagging them. Then, use the multi API to turn them into animated GIF (the images will be ordered alphabetically within the GIF).

Ruby:
Copy to clipboard
cl_image_tag("sample_image.jpg", :width=>400, :height=>300, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("sample_image.jpg", array("width"=>400, "height"=>300, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("sample_image.jpg").image(width=400, height=300, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(400).height(300).crop("fill")).imageTag("sample_image.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample_image.jpg', {width: 400, height: 300, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
React:
Copy to clipboard
<Image publicId="sample_image.jpg" >
  <Transformation width="400" height="300" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_image.jpg" >
  <cld-transformation width="400" height="300" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_image.jpg" >
  <cl-transformation width="400" height="300" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(300).Crop("fill")).BuildImageTag("sample_image.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(400).height(300).crop("fill")).generate("sample_image.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(300).setCrop("fill")).generate("sample_image.jpg")!, cloudinary: cloudinary)
by Maor Gariv

Waveform creation

You can create a waveform from every uploaded audio or video (which includes an audio channel) file. Simply use the waveform flag (fl_waveform in URLs) and set the file’s extension to any image format you like.

Ruby:
Copy to clipboard
cl_video_tag("dog")
PHP:
Copy to clipboard
cl_video_tag("dog")
Python:
Copy to clipboard
CloudinaryVideo("dog").video()
Node.js:
Copy to clipboard
cloudinary.video("dog")
Java:
Copy to clipboard
cloudinary.url().videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog")
React:
Copy to clipboard
<Video publicId="dog" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp4")
by Maor Gariv

Manipulating the audio channel

By setting the audio_codec to none (ac_none in URLs), you can strip the audio channel from the video, serving it without sound. You can also chain another audio file as an overlay to replace the video’s original audio.

The original video file (with audio) -

Ruby:
Copy to clipboard
cl_video_tag("dog")
PHP:
Copy to clipboard
cl_video_tag("dog")
Python:
Copy to clipboard
CloudinaryVideo("dog").video()
Node.js:
Copy to clipboard
cloudinary.video("dog")
Java:
Copy to clipboard
cloudinary.url().videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog")
React:
Copy to clipboard
<Video publicId="dog" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp4")
by Maor Gariv

Accelerate or slow down a video

By using the accelerate effect (e_accelerate in URLs) you can determine how fast the video is going to run. Values are between -50 to 100, positive values for making the video faster and negative for slowing it down.

Original

Slow motion

Accelerated

Ruby:
Copy to clipboard
cl_video_tag("eagle", :effect=>"accelerate:-50")
PHP:
Copy to clipboard
cl_video_tag("eagle", array("effect"=>"accelerate:-50"))
Python:
Copy to clipboard
CloudinaryVideo("eagle").video(effect="accelerate:-50")
Node.js:
Copy to clipboard
cloudinary.video("eagle", {effect: "accelerate:-50"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("accelerate:-50")).videoTag("eagle");
JS:
Copy to clipboard
cloudinary.videoTag('eagle', {effect: "accelerate:-50"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("eagle", {effect: "accelerate:-50"})
React:
Copy to clipboard
<Video publicId="eagle" >
  <Transformation effect="accelerate:-50" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="eagle" >
  <cld-transformation effect="accelerate:-50" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="eagle" >
  <cl-transformation effect="accelerate:-50">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("accelerate:-50")).BuildVideoTag("eagle")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("accelerate:-50")).resourceType("video").generate("eagle.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("accelerate:-50")).generate("eagle.mp4")
by Maor Gariv

Boomerang effect

Playing a video in both directions - by applying the overlay parameter on the video and using the splice flag. For example, let’s create an instant replay of this bike stunt -

Original

Boomerang effect

Ruby:
Copy to clipboard
cl_video_tag("bike_stunt", :transformation=>[
  {:overlay=>"video:bike_stunt", :effect=>"reverse", :flags=>"splice"},
  {:overlay=>"video:bike_stunt", :effect=>"accelerate:-50", :flags=>"splice"}
  ])
PHP:
Copy to clipboard
cl_video_tag("bike_stunt", array("transformation"=>array(
  array("overlay"=>"video:bike_stunt", "effect"=>"reverse", "flags"=>"splice"),
  array("overlay"=>"video:bike_stunt", "effect"=>"accelerate:-50", "flags"=>"splice")
  )))
Python:
Copy to clipboard
CloudinaryVideo("bike_stunt").video(transformation=[
  {'overlay': "video:bike_stunt", 'effect': "reverse", 'flags': "splice"},
  {'overlay': "video:bike_stunt", 'effect': "accelerate:-50", 'flags': "splice"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("bike_stunt", {transformation: [
  {overlay: "video:bike_stunt", effect: "reverse", flags: "splice"},
  {overlay: "video:bike_stunt", effect: "accelerate:-50", flags: "splice"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("reverse").flags("splice").chain()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("accelerate:-50").flags("splice")).videoTag("bike_stunt");
JS:
Copy to clipboard
cloudinary.videoTag('bike_stunt', {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "reverse", flags: "splice"},
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "accelerate:-50", flags: "splice"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("bike_stunt", {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "reverse", flags: "splice"},
  {overlay: new cloudinary.Layer().publicId("video:bike_stunt"), effect: "accelerate:-50", flags: "splice"}
  ]})
React:
Copy to clipboard
<Video publicId="bike_stunt" >
  <Transformation overlay="video:bike_stunt" effect="reverse" flags="splice" />
  <Transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="bike_stunt" >
  <cld-transformation overlay="video:bike_stunt" effect="reverse" flags="splice" />
  <cld-transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="bike_stunt" >
  <cl-transformation overlay="video:bike_stunt" effect="reverse" flags="splice">
  </cl-transformation>
  <cl-transformation overlay="video:bike_stunt" effect="accelerate:-50" flags="splice">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("video:bike_stunt")).Effect("reverse").Flags("splice").Chain()
  .Overlay(new Layer().PublicId("video:bike_stunt")).Effect("accelerate:-50").Flags("splice")).BuildVideoTag("bike_stunt")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("reverse").flags("splice").chain()
  .overlay(new Layer().publicId("video:bike_stunt")).effect("accelerate:-50").flags("splice")).resourceType("video").generate("bike_stunt.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("video:bike_stunt").setEffect("reverse").setFlags("splice").chain()
  .setOverlay("video:bike_stunt").setEffect("accelerate:-50").setFlags("splice")).generate("bike_stunt.mp4")
by Maor Gariv

Automatically Flip Videos

Rotating and flipping videos on Cloudinary is a cakewalk. To rotate a video to an angle you desire, set the angle parameter. To mirror a video and vertically or horizontally flip it, set vflip or hflip as the angle value. Examples:

Dog Video

Angled Dog Video

Rotate Text and Overlay on Dog Video

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:angle=>"vflip"},
  {:width=>500, :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("angle"=>"vflip"),
  array("width"=>500, "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'angle': "vflip"},
  {'width': 500, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .angle("vflip").chain()
  .width(500).crop("scale")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {angle: "vflip"},
  {width: 500, crop: "scale"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation angle="vflip" />
  <Transformation width="500" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation angle="vflip" />
  <cld-transformation width="500" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation angle="vflip">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Angle("vflip").Chain()
  .Width(500).Crop("scale")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .angle("vflip").chain()
  .width(500).crop("scale")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAngle("vflip").chain()
  .setWidth(500).setCrop("scale")).generate("dog.mp4")
by Hadar Bejerano

Adding Video Watermark as an Overlay

Adding watermarks to videos on Cloudinary yields many enhancements, involving only a few simple steps. The sections below describe the various scenarios along with examples.

Original video

Overlay image watermark

Watermark coordinates

Ruby:
Copy to clipboard
cl_video_tag("celenarae")
PHP:
Copy to clipboard
cl_video_tag("celenarae")
Python:
Copy to clipboard
CloudinaryVideo("celenarae").video()
Node.js:
Copy to clipboard
cloudinary.video("celenarae")
Java:
Copy to clipboard
cloudinary.url().videoTag("celenarae");
JS:
Copy to clipboard
cloudinary.videoTag('celenarae').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("celenarae")
React:
Copy to clipboard
<Video publicId="celenarae" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="celenarae" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="celenarae" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("celenarae")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("celenarae.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("celenarae.mp4")
by George Bontea

Generating Video Preview Clips

Creating a dynamic and engaging animated video preview (as opposed to a static image) can have a lot of benefits:

  • Improves the ability to captures a user’s attention for the content
  • More clearly demonstrates that there is video content available
  • Provides several preview clips, allowing the user to decide if the video is relevant pre-click

Original

by Josh Slivken