Video playback effects

Control how your videos play. You can fade videos in and out, loop them, change the playback speed, reverse them, and create a boomerang effect.

Fade in/out

Use the fade video effect to either fade in at the beginning of a video or fade out at the end. The effect accepts a parameter that determines the duration of the fade effect in milliseconds, with a positive value for fading in at the beginning of the video, and a negative value for fading out at the end of the video. In this example, the fade effect gets applied first at the beginning of the video over 2 seconds and then at the end of the video over 4 seconds:

The fade effect is also useful for fading in and out of video overlays. For example, adding a scaled down overlay to the bottom right corner, with a duration of 8 seconds, fading in over 3 seconds, then out over 3 seconds:

You can fade in and out image overlays onto a video in a similar manner - just ensure to specify the duration for the image to display. For example:

Loop

Use the loop effect to deliver a video that loops a specified number of times. The value represents the number of additional plays after the initial run—so e_loop:2 plays the video 3 times in total, and e_loop:5 plays it 6 times (the maximum).

See full syntax: e_loop in the Transformation Reference.

Playback speed

Use the accelerate video effect to either speed up or slow down the video playback speed. The effect accepts an integer value between -50 and 100 that determines how to change the playback speed (in percent), with a positive value for speeding up the video, and a negative value for slowing down the video. In this example, the video is accelerated by 100% (twice normal speed):

See full syntax: e_accelerate in the Transformation Reference.

Reverse

Use the reverse effect to play a video or audio file backwards.

See full syntax: e_reverse in the Transformation Reference.

Boomerang

A boomerang video is a (usually very short) video clip that plays forwards and then backwards. This effect has become quite popular on many social media and video editing apps. You can create a boomerang effect on any video by adding the boomerang effect to your transformation.

To ensure your video is short enough to produce the desired effect, you can use the boomerang effect in conjunction with the duration, start_offset, or end_offset trimming parameters. Keep in mind that the total length of a single repetition of the boomerang effect will be double the length you set for the video using the trimming parameters.

By default, the boomerang effect runs a single time. To get the repetitive effect that is characteristic of boomerang videos, you need to add looping functionality. To do this, you can either:

• Include the HTML5 loop attribute in the relevant video_tag SDK method call or when embedding a Cloudinary video player in your webpage. If delivering your boomerang clip in a video format, this is the recommended method.

• Use the loop transformation effect. If delivering your boomerang video as an animated GIF, this is the recommended method.

For example, the following transformation delivers a selected 2 second clip of the snow_deer video as an animated GIF with an infinitely looping boomerang effect:

See full syntax: e_boomerang in the Transformation Reference.

Progress indicator

Use the progressbar effect (e_progressbar in URLs) to add a progress indicator overlay to your videos. This can be used to show video progress when a video is played inline and the controls are hidden. You can customize the indicator using the type, color and width parameters:

• type - Specifies the type of progress indicator to overlay.
  • bar - Draws a single progress bar across the bottom of the video, starting on the left and ending on the right. Default.
  • frame - Draws a frame around the video, starting in the bottom left and going both ways around the video, ending in the top right.
• color - Specifies the color of the indicator. It can be specified as an RGB hex triplet (e.g. 3e2222) or a named color (e.g. green). Default: Red.
• width - Specifies the width (in pixels) of the indicator. Default: 10px.

Parameter values will be evaluated in the following specific order: [type]:[color]:[width]; therefore to set the color or width, you must also specify the value(s) to the left. Alternatively, you can set named parameters (in any order), with the parameter name and value separated by an underscore (_): [type_<type>]:[color_<color>]:[width_<width>].

For example, to add an olive green frame type progress indicator (using the RGB color that matches the dress color code) with a width of 12 pixels to the video (click video to play):

or using the more verbose syntax:

Here's another video this time applying a green bottom bar indicator that is 6 pixels wide:

See full syntax: e_progressbar in the Transformation Reference.