jQuery video manipulation

Overview

After uploading videos to Cloudinary, they can be manipulated 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 video-specific manipulation functionality using jQuery.
For complete details on all video manipulation functionality, see Video manipulation and delivery and the Video transformations reference.

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:

videoTag method

You can specify transformations using the videoTag method, 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 imageTag method, you can optionally include the transformations.

For example,

$.cloudinary.videoTag("watchme", {controls: true, secure: true}).transformation()
.overlay("text:arial_60:watchme").gravity("north").y(20)
.toHtml()

The code above generates the following HTML video tag:

<video poster="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.jpg" controls>
<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>

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

Direct URL building

Use the url method to return the video's URL as a string value.

var tag = $.cloudinary.url("sample.mp4");

The code above returns the following string:

https://res.cloudinary.com/demo/video/upload/sample.mp4

You can also include transformation parameters in the request, for example, to return the URL for a video padded to a width of 400 pixels:

$.cloudinary.url("sample.mp4", { width: 400, crop: "pad"})

The code above returns the following string:

https://res.cloudinary.com/demo/video/upload/c_pad,w_400/sample.mp4

Video transformation examples

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

$.cloudinary.videoTag("dog").transformation()
  .width(0.4).angle(20).chain()
  .overlay("cloudinary_icon").opacity(50).width(60).gravity("south_east").y(15).x(60)
  .toHtml()

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.

$.cloudinary.videoTag("ski_jump").transformation()
  .overlay("video:ski_jump").flags("splice").effect("reverse").chain()
  .overlay("video:ski_jump").flags("splice").effect("accelerate:-50").chain()
  .effect("brightness:10").radius("max")
  .toHtml()

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.

$.cloudinary.videoTag("dog", {controls: true, loop: true}).transformation()
  .fallbackContent("Your browser does not support HTML5 video tags.")
  .height(360).width(480).quality(70).duration(10).crop("pad")
  .toHtml()

The code above generates the following HTML video tag:

<video poster="https://res.cloudinary.com/demo/video/upload/c_pad,du_10,h_360,q_70,w_480/dog.jpg" controls loop>
<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>