Angular video transformations

Last updated: Aug-03-2022

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 speed, duration, sound, and appearance. There are also some features that are specific to audio.

This section introduces you to the basics of video transformations using the @cloudinary/url-gen package. For complete details on all video transformation functionality, see Video transformations and the Transformation URL API reference.

If you haven't yet installed the Angular v2 SDK, you might want to jump to the quick start first.

See also: Angular image transformations

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.

Tip
Elsewhere in the documentation, where you see the multi-tabbed transformation code examples, select the JS tab and the js-url-gen library.

Video transformations with Angular

To transform a video asset, use the @cloudinary/url-gen package to create the transformation, then pass the transformed video object to the cldVid attribute in your advanced-video component to render the video on your site. For example:

Copy to clipboard
// In your app.module.ts, inject the library:
import {CloudinaryModule} from '@cloudinary/ng';

imports: [
  ...,
  CloudinaryModule
],
...
Copy to clipboard
// In your component.ts, use `@cloudinary/url-gen` to generate your transformations.

import {Component, OnInit} from '@angular/core';
import {Cloudinary, CloudinaryVideo} from '@cloudinary/url-gen';

// Import required actions and qualifiers.
import {fill} from "@cloudinary/url-gen/actions/resize";
import {byRadius} from "@cloudinary/url-gen/actions/roundCorners";
import {FocusOn} from "@cloudinary/url-gen/qualifiers/focusOn";
import {Gravity} from "@cloudinary/url-gen/qualifiers";
import {AutoFocus} from "@cloudinary/url-gen/qualifiers/autoFocus";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent implements OnInit{
  vid: CloudinaryVideo;

  ngOnInit() {

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

    // Use the video with public ID, 'docs/walking_talking'.
    this.vid = cld.video('docs/walking_talking');

    // Apply the transformation.
    this.vid.resize(fill().width(150).height(150)
    .gravity(Gravity.autoGravity().autoFocus(AutoFocus.focusOn(FocusOn.faces())))) // Crop the video, focusing on the faces.
    .roundCorners(byRadius(20));    // Round the corners.

  }
}
Copy to clipboard
<!-- In your view, add the advanced-video component and pass your Cloudinary video.-->
<advanced-video [cldVid]="vid" controls></advanced-video>

In the above example, the walking_talking video is cropped to a 150 x 150 pixel video with rounded corners, focusing on the faces, resulting in this video element:

Copy to clipboard
<video controls>
<source src="https://res.cloudinary.com/demo/video/upload/c_fill,g_auto:faces,h_150,w_150/r_20/v1/docs/walking_talking.webm" type="video/webm">
<source src="https://res.cloudinary.com/demo/video/upload/c_fill,g_auto:faces,h_150,w_150/r_20/v1/docs/walking_talking.mp4" type="video/mp4">
<source src="https://res.cloudinary.com/demo/video/upload/c_fill,g_auto:faces,h_150,w_150/r_20/v1/docs/walking_talking.ogv" type="video/ogg">
</video>

Code explorer: Angular video transformations

In this Angular app, you can see all the transformations that are used throughout this guide. Each transformation example has its own xxx.component.ts file showing the imports and syntax required (use the hamburger menu to see the other files).

There are various templates defined (xxx.component.html), which use the advanced-video component to display the transformed videos on a simple web page.

This code is also available in GitHub.

advanced-video properties

The advanced-video component accepts the following properties:

HTML video attributes

The advanced-video component accepts the following properties, which result in standard HTML video attributes:

advanced-video property HTML video attribute
autoPlay autoplay
controls controls
loop loop
muted muted
playsInline playsinline
poster poster
preload preload

For example, this video would play inline, with controls, loop and start with the specified poster image:

Copy to clipboard
<advanced-video [cldVid]="vid" controls playsInline loop poster="https://res.cloudinary.com/demo/video/upload/so_10/c_scale,w_150/docs/walking_talking.jpg"></advanced-video>

HTML media events

The advanced-video component accepts the following properties, which result in standard HTML media event attributes:

advanced-video event HTML media event
ended onended
error onerror
loadstart onloadstart
play onplay
playing onplaying

For example, this video would call the playFunction() function, defined in the component.ts, when played:

Copy to clipboard
<!-- In your view:-->
<advanced-video [cldVid]="vid" controls (play)="playFunction()"></advanced-video>

Plugins

You can lazy load your videos, in the same way as you can for images, using the lazyload plugin.

For example, this video would only load when it comes into the viewport, then play automatically:

Copy to clipboard
// In your component.ts: 

// Import the lazyload plugin.
import {lazyload} from '@cloudinary/ng';

...

   // Use the lazyload plugin
  plugins = [lazyload()]
Copy to clipboard
<!-- In your view:-->
<advanced-video [cldVid]="vid" autoPlay [plugins]="plugins"></advanced-video>

Sources

You can optionally specify sources in the sources property, such as:

Copy to clipboard
// In your component.ts: 
import { videoCodec } from "@cloudinary/url-gen/actions/transcode";
import { auto, vp9 } from '@cloudinary/url-gen/qualifiers/videoCodec';

...

  sources = [
  {
      type: 'mp4',
      codecs: ['avc1.4d002a'],
      transcode: videoCodec(auto())
  },
  {
      type: 'webm',
      codecs: ['vp8', 'vorbis'],
      transcode: videoCodec(vp9())
  }];

For example, this video would have a choice of two sources:

Copy to clipboard
<!-- In your view:-->
<advanced-video [cldVid]="vid" [sources]="sources" controls></advanced-video>

It results in the following video element:

Copy to clipboard
<video controls>
<source src="https://res.cloudinary.com/demo/video/upload/vc_auto/v1/dog.mp4" type="video/mp4; codecs=avc1.4d002a">
<source src="https://res.cloudinary.com/demo/video/upload/vc_vp9/v1/dog.webm" type="video/webm; codecs=vp8, vorbis">
</video>

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:
Copy to clipboard
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:

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:

Copy to clipboard
myVideo.setVersion(1510668637);

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:

Copy to clipboard
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:

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

Copy to clipboard
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:

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.

Copy to clipboard
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:

✔️ Feedback sent!

Rate this page: