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 -
Ruby:
cl_video_tag(" bike_stunt " )
PHP:
cl_video_tag(" bike_stunt " )
Python:
CloudinaryVideo(" bike_stunt " ).video()
Node.js:
cloudinary.video(" bike_stunt " )
Java:
cloudinary.url().videoTag(" bike_stunt " );
JS:
cloudinary.videoTag(' bike_stunt ' ).toHtml();
jQuery:
$ .cloudinary.video(" bike_stunt " )
React:
<Video publicId =" bike_stunt " >
</Video>
Vue.js:
<cld-video publicId =" bike_stunt " >
</cld-video>
Angular:
<cl-video public-id =" bike_stunt " >
</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.BuildVideoTag(" bike_stunt " )
Android:
MediaManager.get().url().resourceType(" video " ).generate(" bike_stunt.mp4 " );
iOS:
cloudinary.createUrl().setResourceType(" video " ).generate(" bike_stunt.mp4 " )
A first regular view, followed by a “rewind” (carried out by using the reverse
effect). Then, another play, this time with slo-mo (accelerate
effect with negative values) -
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 " )