Programmable Media

React Native video transformations

Last updated: Jan-29-2024

Overview

After uploading videos to Cloudinary, they can be transformed in many ways.

The syntax for transforming and delivering videos is generally similar to that for images, and you can apply the majority of available image transformations to video as well. For example, you can resize, crop, rotate, set video quality and format or use auto quality and/or auto format, add text or image overlays to your videos, and more.

There are also a number of special options you can use for transforming and delivering video content. For example, you can adjust their size, shape, speed, duration, quality, and appearance. There are also some features that are specific to audio.

This section introduces you to the basics of React Native video streaming and transformation. For complete details on all video transformation functionality, see Video transformations and the Transformation URL API Reference.

The @cloudinary/url-gen package simplifies the generation of transformation URLs, and includes special components and directives for easy embedding of assets in your React Native application.

Important
The React Native library is currently in Beta. There may be minor changes to naming or other implementation details before the general access release. We invite you to try it out. We would appreciate any feedback via our support team.

Video transformation functionality

In addition to transformation features that are equally relevant for images and video, such as resizing, cropping, rotating, adding text or image overlays, and setting video quality or format, there are a variety of special transformations you can use for video. For example, you can:

You can optionally specify all of the above transformations to videos using methods that generate image tags or via direct URL-building directives.

Deliver videos

Use the Cloudinary React Native video player and the AdvancedVideo component to deliver your videos with React Native using the devices native video player.

Alternatively, generate your Cloudinary URLs and use a video player of your choice.

Direct URL building

You can build a video URL by:

  1. Configuring your Cloudinary instance.
  2. Instantiating a CloudinaryVideo object for the video you want to deliver, using cld.video().
  3. Calling the toURL() method of the CloudinaryVideo class to return the delivery URL:

The resulting URL, myURL, is:

Specifying a version of your video to deliver

You can specify a particular version of your video to deliver by using the setVersion method. The version is added to the delivery URL as explained in Asset versions.

For example, to specify version 1510668637 of the elephants video from the example above:

The resulting URL is now:

Transforming your video

Videos are transformed by adding serialized transformation instructions to the video delivery URL. For example, to scale your video to a width of 400 pixels, add c_scale,w_400.

https://res.cloudinary.com/demo/video/upload/c_scale,w_400/elephants.mp4

Using the @cloudinary/url-gen package, you transform a video by performing one or more transformation actions on the CloudinaryVideo object (see the syntax overview). Remember to import the actions that you are using:

The resulting URL is:

Tip

In general, when using an SDK, you will probably take advantage of the SDK parameter names for improved readability and maintenance of your code. However, you can also optionally add any transformation in URL syntax using the addTransformation method.

For example:

Video transformation examples

This section provides examples of using the @cloudinary/url-gen package to apply some of the video transformation features mentioned in the previous section.

Example 1:

The following example resizes the elephants video to 20% of its original size and rotates it by 20 degrees. It also adds a semi-transparent cloudinary logo in the bottom right corner, using a southeast gravity with adjusted x and y coordinates to reach the corner of the rotated video.

The resulting URL is:

Example 2:

The following example adjusts the brightness of a skiing video, and sets its radius to max in order to give a telescope-like effect. It then appends a copy of the video in reverse, and then plays forward again, but in slow motion.

The resulting URL is:

✔️ Feedback sent!

Rate this page: