Programmable Media
Menu

React (Legacy) video transformations

Last updated: Oct-31-2023

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 files which are uploaded to Cloudinary as a video asset type.

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

On this page:

See also: React image transformation

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.

Video element

You can specify transformations using the Video element, 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 Image component, you can optionally include Transformation tags to define chained transformations.

For example,

Will be compiled by React to:

You can also add other, non-transformation parameters to the Video component such as the asset version, configuration parameters and HTML5 video tag attributes.

  • The version parameter is added to the delivery URL as explained in Asset versions.
  • Configuration parameters that you specify here override any that you have set globally.
  • HTML5 video tag attributes are added to the resulting <video> tag. The video is delivered from Cloudinary using the width and height in the transformation but is displayed at the dimensions specified in the tag.

For details, see the video tag documentation and the HTML5 Video Player blog post.

Audio element

You can deliver uploaded audio files (or the audio component of video files) using the Audio element, which automatically generates an HTML5 audio tag including the URL source for the main formats supported by web browsers (mp3, wav and ogg). This enables the browser to automatically select and play the audio format it supports. The audio files are created dynamically when first accessed by your users. As with the Image component, you can optionally include Transformation tags to define chained transformations. For more details, see the Audio transformations documentation.

You can also include the following attributes within the Audio element:

  • sourceTypes - The audio formats you want to support, e.g.: sourceTypes={['wav', 'mp3']}
  • sourceTransformation - You can apply a transformation to each format you want to support separately, e.g.: sourceTransformation={{wav: {effect: "volume:30"}, mp3: {effect: "volume:45"}}}
  • fallback - The text to appear if HTML audio tags are not supported, e.g.: fallback="Cannot play audio"
  • controls - If you also want the audio controls to appear, e.g.: controls

For example, to deliver 2 seconds of the 'dog' audio file in wav and mp3 formats, with a volume of 30 and 45 respectively, and include controls and a fallback message: "Cannot play audio":

Will be compiled by React to:

Referencing the HTML video element

If you would like to reference the underlying video HTML element created by the Video component, you can pass an innerRef parameter to the Video component. This will then allow you to access the video elements attributes, and control the underlying video element using the native video element functions like play/pause/stop.

Video transformation examples

This section provides examples of using React 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 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.

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 the plays forward again, but in slow motion.

Example 3:

The following example generates 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, with a custom fallback message for browsers that don't support HTML5:

The above statement will be compiled by React to:

✔️ Feedback sent!

Rate this page: