> ## 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.

# Angular (Legacy) 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 Angular 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).

> **NOTES**:
>
> * The video transformation reference shows all transformation options using `snake_case`, but the Angular SDK transformation attributes support `kebab-case`. You can apply the kebab-case style to all transformation attributes.

> * If you find that any of the Cloudinary transformation attributes conflict with attribute directives from another package, you can prefix the transformation attributes with `cld`. For example, instead of `responsive` you can use `cld-responsive`.

 
See also: [Angular image transformation](angular1_image_manipulation)

## 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. 
### cl-video component

You can specify transformations using the `cl-video` component, which automatically generates an HTML5 video tag including the URL sources for the main formats supported by web browsers (`webm`, `mp4` and `ogv`), as well as a poster thumbnail image, which is automatically generated from a frame in the video. This enables the browser to automatically select and play the video format it supports. The video files are created dynamically when first accessed by your users. 
 
As with the `cl-image` component, you can optionally include `cl-transformation` tags to define chained transformations.
 
For example: 
 
```html
<cl-video public-id="watchme" secure="true" class="my-videos" controls="true">
        <cl-transformation overlay="text:arial_60:watchme" gravity="north" y="20"></cl-transformation>
</cl-video>
```
 
Will be compiled by Angular to: 

```html
 
<cl-video _ngcontent-c0="" class="my-videos" controls="true" public-id="watchme" secure="true" ng-reflect-public-id="watchme">
<video _ngcontent_c0="" class="my-videos" controls="true" public_id="watchme" ng_reflect_public_id="watchme" poster="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.jpg">
<source src="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.webm" type="video/webm">
<source src="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.mp4" type="video/mp4">
<source src="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.ogv" type="video/ogg">
</video>
</cl-video>
```
 
> **TIP**: Keep in mind that [Angular attribute binding is required](https://angular.io/guide/template-syntax#attribute-binding) when there is no element property to bind. For example, to pass the `version` attribute to the `cl-video` component, use `[attr.version]="myVersion"`.

For more details, see the [video tag](video_manipulation_and_delivery#embedding_videos_in_web_pages_using_sdks) documentation.
 
### Video attribute directives

Instead of using the `<cl-video>` component to generate a complete `<video>` tag, you can use the `clSrc` and `clHref` (or `cl-src` and `cl-href` for AngularJS) **attribute directives** to directly transform the given public ID or remote URI to a cloudinary video `src` or link `href` attribute. This is done the same way for videos and images. For an example, see [Image attribute directives](angular1_image_manipulation#image_attribute_directives).
 
## Video transformation examples
This section provides examples of using Angular code to apply some of the video transformation features mentioned in the previous section.
 
### Example 1: 
The following example resizes the `dog` video to 40% of it's 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.
 
```html
<cl-video public-id="dog" controls="true" >
      <cl-transformation width="0.4" angle="20"></cl-transformation>
      <cl-transformation overlay="cloudinary_icon_white" width="60" opacity="50" gravity="south_east" y="15" x="60"></cl-transformation>
</cl-video>
```
 
![dog video with cloudinary icon](https://res.cloudinary.com/demo/video/upload/w_0.4,a_20/l_cloudinary_icon_white,w_60,o_50,g_south_east,y_15,x_60/dog.mp4 "with_url: false, 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 plays forward again, but in slow motion. 
 
```html
<cl-video public-id="ski_jump" controls="true" >
        <cl-transformation overlay="video:ski_jump" flags="splice" effect="reverse"></cl-transformation>
        <cl-transformation overlay="video:ski_jump" flags="splice" effect="accelerate:-50"></cl-transformation>
        <cl-transformation effect="brightness:10" radius="max"></cl-transformation>
</cl-video>
```
 
![ski video forward and reverse](https://res.cloudinary.com/demo/video/upload/l_video:ski_jump,fl_splice,e_reverse/l_video:ski_jump,fl_splice,e_accelerate:-50/e_brightness:10,r_max/ski_jump.mp4 "with_url: false, with_code: false, width:400")
 
### Example 3:
The following example generates a `<video>` HTML5 tag for a video whose first 10 seconds will loop continuously in an HTML5 video player with default controls. The video is cropped to 360X480 using the pad cropping method, and it is generated at 70% quality to control file size.
 
```html
<cl-video public-id="dog" controls="true" loop="true" fallback-content="Your browser does not support HTML5 video tags.">
       <cl-transformation height="360" width="480" quality="70" duration="10" crop="pad"> </cl-transformation>
</cl-video>               
```
 
The above statement will be compiled by Angular to: 
 
```html
<cl-video _ngcontent-c0="" class="my-videos" controls="true" loop="true" public-id="dog" 
 ng-reflect-public-id="dog">
  <video _ngcontent_c0="" public_id="dog" ng_reflect_public_id="dog" 
   poster="https://res.cloudinary.com/demo/video/upload/c_pad,du_10,h_360,q_70,w_480/dog.jpg" 
   controls="true" loop="true">
	<source src="https://res.cloudinary.com/demo/video/upload/c_pad,du_10,h_360,q_70,w_480/dog.webm" 
	 type="video/webm">
	<source src="https://res.cloudinary.com/demo/video/upload/c_pad,du_10,h_360,q_70,w_480/dog.mp4" 
	 type="video/mp4">
	<source src="https://res.cloudinary.com/demo/video/upload/c_pad,du_10,h_360,q_70,w_480/dog.ogv" 
	 type="video/ogg">
Your browser does not support HTML5 video tags.
  </video>
</cl-video>
```
 
You can also have a look at [a more complex example](https://github.com/cloudinary/cloudinary_angular/blob/angular_next/samples/photo_album/app/js/photo-list/photo-list.component.html#L35) in the Angular photo-album demo app. This example includes transformations on the poster image and for individual output types.