Cloudinary Cookbook recipes about accelerate

← View popular recipes

Find recipes by tags:

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

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

URL:

https://res.cloudinary.com/demo/video/upload/e_accelerate:-50/eagle.mp4

Ruby:

cl_video_tag("eagle", :effect=>"accelerate:-50")

PHP:

cl_video_tag("eagle", array("effect"=>"accelerate:-50"))

Python:

CloudinaryVideo("eagle").video(effect="accelerate:-50")

Node.js:

cloudinary.video("eagle", {effect: "accelerate:-50"})

Java:

cloudinary.url().transformation(new Transformation().effect("accelerate:-50")).videoTag("eagle");

JS:

cloudinary.videoTag('eagle', {effect: "accelerate:-50"}).toHtml();

jQuery:

$.cloudinary.video("eagle", {effect: "accelerate:-50"})

React:

<Video publicId="eagle" >
  <Transformation effect="accelerate:-50" />
</Video>

Vue.js:

<cld-video publicId="eagle" >
  <cld-transformation effect="accelerate:-50" />
</cld-video>

Angular:

<cl-video public-id="eagle" >
  <cl-transformation effect="accelerate:-50">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().Effect("accelerate:-50")).BuildVideoTag("eagle")

Android:

MediaManager.get().url().transformation(new Transformation().effect("accelerate:-50")).resourceType("video").generate("eagle.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEffect("accelerate:-50")).generate("eagle.mp4")

by Maor Gariv Jul 02, 2020

Tags:

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

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

URL:

https://res.cloudinary.com/demo/video/upload/l_video:bike_stunt,e_reverse,fl_splice/l_video:bike_stunt,e_accelerate:-50,fl_splice/bike_stunt.mp4

Ruby:

cl_video_tag("bike_stunt", :transformation=>[
  {:overlay=>"video:bike_stunt", :effect=>"reverse", :flags=>"splice"},
  {:overlay=>"video:bike_stunt", :effect=>"accelerate:-50", :flags=>"splice"}
  ])

PHP:

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:

CloudinaryVideo("bike_stunt").video(transformation=[
  {'overlay': "video:bike_stunt", 'effect': "reverse", 'flags': "splice"},
  {'overlay': "video:bike_stunt", 'effect': "accelerate:-50", 'flags': "splice"}
  ])

Node.js:

cloudinary.video("bike_stunt", {transformation: [
  {overlay: "video:bike_stunt", effect: "reverse", flags: "splice"},
  {overlay: "video:bike_stunt", effect: "accelerate:-50", flags: "splice"}
  ]})

Java:

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:

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:

$.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:

<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:

<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:

<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:

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:

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:

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 Jul 02, 2020

Tags: