> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native video transformations


## 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](video_manipulation_and_delivery) and the [Transformation URL API Reference](transformation_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.

## 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:
 
* [Transcode videos](video_manipulation_and_delivery#transcoding_videos_to_other_formats) from one format to another
* Apply [video effects](video_effects_and_enhancements) such as fade-in/out, accelerating or decelerating, adjusting volume, playing in reverse
* Play [video-in-video](video_layers#video_overlays), [trim](video_trimming_and_concatenating#trimming_videos) videos, or [concatenate](video_trimming_and_concatenating#concatenating_media) multiple videos
* Set [video](video_manipulation_and_delivery#video_codec_settings) and [audio](audio_transformations#audio_settings) quality options such as bitrate, video codec, audio sampling frequency, or audio codec
* Adjust the visual tone of your video with [3-color-dimension LUTs](video_effects_and_enhancements#3_color_dimension_luts_3d_luts)
* Generate [thumbnails](video_effects_and_enhancements#video_thumbnails) or [animated](videos_to_animated_images) images from video
* Deliver your video using [adaptive bitrate streaming](adaptive_bitrate_streaming) in HLS or MPEG-DASH

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](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.
1. Instantiating a `CloudinaryVideo` object for the video you want to deliver, using `cld.video()`. 
1. Calling the `toURL()` method of the `CloudinaryVideo` class to return the delivery URL:

```js
import {Cloudinary} from "@cloudinary/url-gen";

// Create and configure your Cloudinary instance.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
}); 

// Instantiate a CloudinaryVideo object for the video with public ID, 'elephants'.
const myVideo = cld.video('elephants');

// Get the URL of the video.
const myURL = myVideo.toURL();
```

The resulting URL, `myURL`, is:

![Sample video](https://res.cloudinary.com/demo/video/upload/elephants "with_code:false, thumb: w_300")

#### 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](advanced_url_delivery_options#asset_versions).

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

```js
myVideo.setVersion(1510668637);
```

The resulting URL is now:

![Elephants video](https://res.cloudinary.com/demo/video/upload/v1510668637/elephants.mp4 "with_code:false, with_image:false")

#### 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](react_native_image_transformations#syntax_overview)). Remember to import the actions that you are using:

```js
import {Cloudinary} from "@cloudinary/url-gen";

// Import the scale mode from the resize action.
import {scale} from "@cloudinary/url-gen/actions/resize";

// Create and configure your Cloudinary instance.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
}); 

// Instantiate a CloudinaryVideo object for the video with public ID, 'elephants'.
const myVideo = cld.video('elephants');

// Scale the video to a width of 400 pixels.
myVideo.resize(scale().width(400));

// Get the URL of the video.
const myURL = myVideo.toURL();

```

The resulting URL is:

![elephants video resized](https://res.cloudinary.com/demo/video/upload/c_scale,w_400/elephants.mp4 "with_url: true, with_code: false")

> **TIP**: Discover [alternative ways to apply transformations](#alternative_ways_to_apply_transformations) to your videos.

### Alternative ways to apply transformations

There are a couple of other ways to apply transformations to your videos that you may prefer to use, for example if a new transformation is not yet supported by the SDK, or if you're more familiar with other SDKs. Note, however, that you won't benefit from your IDE's code completion feature for building the transformations in these ways.

**See also**: [Shortcuts and aliases][shortcuts-link] for other ways to simplify the syntax.

#### URL syntax

You can add any transformation in [URL syntax](transformation_reference) using the `addTransformation` method.

For example:

```js
myVideo.addTransformation('c_thumb,g_face,h_150,w_150/r_20');
```

This can be used together with other actions and qualifiers in the usual way. It's useful if a new transformation is added but not yet available in the SDK, or if you're just more familiar with the URL syntax.

#### Object syntax

If you prefer the more concise syntax used for [transformations in the Node.js SDK](node_image_manipulation), you can use the `transformationStringFromObject` method to build the transformation, and add it to your video using `addTransformation`, importing only `transformationStringFromObject` instead of all the individual actions and qualifiers. 

For example:

```js
import { transformationStringFromObject } from "@cloudinary/url-gen";

const transformation = transformationStringFromObject([
  {gravity: "face", height: 150, width: 150, crop: "thumb"},
  {radius: 20}
  ]);
myVideo.addTransformation(transformation);
```

> **NOTE**: The JavaScript required for this syntax is likely to be heavier than importing the actions and qualifiers separately.
## 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.
 
```js

import {Cloudinary} from "@cloudinary/url-gen";
import {Transformation} from "@cloudinary/url-gen";
import {scale} from "@cloudinary/url-gen/actions/resize";
import {byAngle} from "@cloudinary/url-gen/actions/rotate";
import {source} from "@cloudinary/url-gen/actions/overlay";
import {opacity} from "@cloudinary/url-gen/actions/adjust";
import {image} from "@cloudinary/url-gen/qualifiers/source";
import {Position} from "@cloudinary/url-gen/qualifiers/position";
import {compass} from "@cloudinary/url-gen/qualifiers/gravity";


// Create and configure your Cloudinary instance.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
}); 

// Use the video with public ID, 'elephants'.
const myVideo = cld.video('elephants');

// Apply the transformation.
myVideo
.resize(scale().width(0.2))
.rotate(byAngle(20))
.overlay(
  source(
    image('cloudinary_icon')
    .transformation(new Transformation()
      .resize(scale().width(60))
      .adjust(opacity(50))
      )
  )
  .position(new Position().gravity(compass('south_east')).offsetX(60).offsetY(15))  
);

// Get the URL of the video.
const myURL = myVideo.toURL();

```

The resulting URL is:

![elephants video with cloudinary icon](https://res.cloudinary.com/demo/video/upload/c_scale,w_0.2/a_20/l_cloudinary_icon/c_scale,w_60/o_50/fl_layer_apply,g_south_east,x_60,y_15/elephants "with_url: true, with_code: false")

### Example 2: 

The following example adjusts the brightness of the 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. 
 
```js
import {Cloudinary} from "@cloudinary/url-gen";
import {Transformation} from "@cloudinary/url-gen";
import {reverse,accelerate} from "@cloudinary/url-gen/actions/effect";
import {brightness} from "@cloudinary/url-gen/actions/adjust";
import {max} from "@cloudinary/url-gen/actions/roundCorners";
import {concatenate} from "@cloudinary/url-gen/actions/videoEdit";
import {Concatenate} from "@cloudinary/url-gen/qualifiers/concatenate";


// Create and configure your Cloudinary instance.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
}); 

// Use the video with public ID, 'ski_jump'.
const myVideo = cld.video('ski_jump');

// Apply the transformation.
myVideo
  .videoEdit(concatenate(Concatenate.videoSource('ski_jump').transformation(new Transformation().effect(reverse()))))
  .videoEdit(concatenate(Concatenate.videoSource('ski_jump').transformation(new Transformation().effect(accelerate(-50)))))
  .adjust(brightness(10))
  .roundCorners(max());

// Get the URL of the video.
const myURL = myVideo.toURL();

```

The resulting URL is:

![ski video forward and reverse](https://res.cloudinary.com/demo/video/upload/fl_splice,l_video:ski_jump/e_reverse/fl_layer_apply/fl_splice,l_video:ski_jump/e_accelerate:-50/fl_layer_apply/e_brightness:10/r_max/w_400/ski_jump "with_url: true, with_code: false, width:400")