Programmable Media

Video trimming and concatenating

Last updated: Jan-09-2024

When transforming and editing your videos, you will often want to trim parts of the video to adjust the length or concatenate different videos together. You can use Cloudinary's trimming and concatenating functionality to achieve this.

Trimming videos

Trim a video (and discard the rest) by using a combination of the following 3 parameters to specify the section of video to keep after trimming:

  • start_offset (so in URLs) specifies the start.
  • end_offset (eo in URLs) specifies the end.
  • duration (du in URLs) specifies the duration.

Possible values:

  • A float representing the time in seconds e.g. 5.44 (5 seconds and 440 milliseconds).
  • A string representing the percentage of the video length. This string consists of a number with a p appended e.g. 35p (0p is the first frame and 100p is the last frame). The client libraries also support appending a % instead of a p.

Examples with the uploaded mp4 video named dog:

  1. Trimming the video to the section that starts at 6.5 seconds and ends at 10 seconds:

  2. Trimming the video to the section that starts at 10 percent with a duration of 30 percent (effectively from the 10 percent mark to the 40 percent mark):

Client libraries also support the offset shortcut parameter to combine the 2 values representing the start and end of the video to keep e.g. [2.5, 9.5] or ['10p', '30p']. In frameworks that support ranges you can use: 2.66..3.21 or '35%..70%'. An equivalent of the offset shortcut is not available for URLs.

For example, trimming the uploaded mp4 video named dog to the section that starts at 6.5 seconds and ends at 10 seconds:

Tip
If you want a video to play at a certain position but not trim the rest of the video out, you can make use of the HTML5 t parameter in the video source.

For example, this URL starts playback of the dog video at 6.5 seconds and stops it again at 10 seconds:

Video tutorial: Trim videos using the Node.js SDK

Watch this video tutorial to learn how to trim your videos using the Node.js SDK:

Concatenating media

Whether concatenating videos together, or concatenating videos with images, with or without transitions, there are a few important points to note:

Concatenate videos together

Cloudinary supports the concatenation of videos by using the overlay video parameter (l_video: in URLs) to specify the name of another uploaded video and then the splice flag (fl_splice in URLs) to indicate that the video should be concatenated on to the container video and not added as an overlay.

You can also concatenate videos with custom transitions using the transition effect (e_transition in URLs).

Tip
Make sure you've read the important notes regarding concatenating media.

For example, to concatenate the video named dog on to the end of the video named kitten_fighting, with both videos set to a width of 300 pixels and a height of 200 pixels:

By default, the video is spliced on to the end of the container video: to splice the video on to the beginning, add the start_offset parameter and set it to 0 (so_0 in URLs). For example, to concatenate the video named dog on to the beginning of the video named kitten_fighting, with both videos set to a width of 300 pixels and a height of 200 pixels:

To concatenate only a section of a video to the end of another video use the offset parameters (see Trimming videos for more information on the parameters and their possible values) together with the layer_apply flag (fl_layer_apply in URLs). For example, to splice the first 5 seconds of the video named kitten_fighting to the end of the video named dog rotated by 180 degrees, with both videos set to a width of 300 pixels and a height of 200 pixels.

The layer_apply flag in the above example instructs Cloudinary to apply the so_0 parameter in the layer component as a regular start offset transformation parameter applied to the layer, and not in its special concatenate-to-beginning usage for fl_splice. To use the so_0 with fl_splice for concatenating to the beginning, in a case where fl_layer_apply is also used, specify the so_0 in the fl_layer_apply component: /l_...../fl_layer_apply,so_0).

Concatenate videos with images

Cloudinary also supports the concatenation of videos with images by using the following combination of parameters:

  • overlay (l: in URLs) to specify the name of an uploaded image.
  • splice flag (fl_splice in URLs) to indicate that the image should be concatenated on to the container video and not added as an overlay.
  • duration parameter (du in URLs) to specify the amount of time in seconds to display the image.
  • start_offset (optional) set to 0 (so_0 in URLs) to concatenate the image at the beginning of the video instead of at the end.
  • layer_apply flag (fl_layer_apply) to indicate that the above parameters are applied to the image (with the overlay parameter) and not the base video.

Tip
Make sure you've read the important notes regarding concatenating media.

For example, to concatenate the image named sample to the start of the video named dog for a duration of 3 seconds (both the video and image are scaled to a width of 300 pixels and a height of 200 pixels):

Cross fade transitions

You can cross fade between videos or between videos and images, by adding a transition to the splice flag. The transition takes the name of a supported cross fade transition and a duration. Try out each of the transitions using our interactive demo.

Tip
Make sure you've read the important notes regarding concatenating media.

Cross fading causes the assets to be overlapped for the duration of the transition. Therefore, the total video length is less than the sum of the concatenated parts. The duration of the transition that you specify must be less than the length of each of the videos that you are concatenating.

Explaining cross fade

In the following example, the living space video cross fades into the kitchen video using a transition called circleopen for two seconds (fl_splice:transition_(name_circleopen;du_2)):

Note
In this example, both videos are the same dimensions so there is no need to add a resize transformation to either video.

In this next example, the video cross fades into an image of a house using the fade transition for three seconds (fl_splice:transition_(name_fade;du_3)):

You can also create a slideshow out of images, using an underlying blank video. Here, we fade from the blank video to the first image with a default transition of one second:

See also: Video generation (Beta) for a more controlled way to create slideshows, with richer transitions.

Cross fade transitions interactive demo

Use this interactive demo to see how the different transitions look.

Choose a cross fade transition, then click the button to generate the new video.

Custom transitions

Important
The custom transitions functionality has been deprecated and replaced by cross fade transitions.

Cloudinary supports the concatenation of videos with a custom transition by including a transition video as an additional layer and specifying the transition effect (e_transition in URLs).

Note
The splice flag should not be used when concatenating with a custom transition.

To add a custom transition:

  1. Add your base video as usual.
  2. Add the second video using the overlay video parameter (l_video: in URLs), ensuring height and width are the same as the base video.
  3. Specify the transition video as follows:
    1. Add a luma matte transition video using the overlay video parameter (l_video: in URLs).
    2. Specify the transition effect to indicate that this video overlay is to be used as a transition between the base and second video.
    3. Add the layer_apply flag (fl_layer_apply) to close the transition layer.
  4. Add a second layer_apply flag to close the second video layer. For more information, see the documentation on layer_apply.

Here's an example showing the kitten_fighting video transitioning to the dog video:

A luma matte transition video is a grayscale video that uses lightness values to indicate the transparency (alpha channel) of two transitioning videos. For example, the base video will be transparent in the completely white areas and opaque in the completely black areas of the matte. The second video will then be visible in the areas of transparency of the base video; anywhere between will show both videos with the opacity of each determined by the lightness values.

You need to upload your own luma matte transition videos to your Cloudinary product environment. The example below has been uploaded to the Cloudinary demo product environment (and used in the example above):

The transition you see above starts black and adds increasing areas of white. When applied as a transition video, the base video will display first and the second video will take up increasing space until none of the base video is visible.

As the luma matte is a video itself, you can also add transformations in the same way you would with any other uploaded video. For example, you can use the accelerate effect (e_accelerate) to adjust the speed of the transition or flip the transition using the angle parameter (a in URLs). You'll need to be careful when applying transformations to the matte as this could cause issues with the transition, particularly if you change the aspect ratio. Here's the same video as above with the transition slowed to 5 seconds and flipped 180 degrees:

You can concatenate multiple videos with (and without) transitions by chaining additional videos and transition overlays. Here's an example of two transitions followed by a standard fl_splice concatenation (with no transition):

Note
Total video duration is calculated as the combined duration of all videos minus the duration of the transitions (as two videos are playing during the transition).

Concatenating authenticated or private assets

Similar to specifying authenticated or private assets in overlays, when concatenating authenticated or private assets, you need to modify the syntax accordingly:

Images:

  • For private images: l_private:<public_id of image>
  • For authenticated images: l_authenticated:<public_id of image>

Videos:

  • For private videos: l_video:private:<public_id of video>
  • For authenticated videos: l_video:authenticated:<public_id of video>

Audio assets:

  • For private audio assets: l_audio:private:<public_id of audio asset>
  • For authenticated audio assets: l_audio:authenticated:<public_id of audio asset>

Video tutorial: Concatenate videos using the Node.js SDK

Watch this video tutorial to learn how to concatenate two videos using the Node.js SDK:

✔️ Feedback sent!

Rate this page: