Users from all over the world have varying quality internet connections, data caps, and many other restrictions that make it difficult to download heavy content such as images and videos. To make content viewable to users, it has to be compressed and optimized well.
Cloudinary offers a myriad of ways to optimize video content. In this blog post, we’ll show you how to use URL transformations to optimize the delivery of your video content and ensure a smooth playback experience for as many users as possible.
URL transformations are optional parameters that you can include in the content URLs that allow you to make alterations to the content that will be served. In the case of videos, these parameters allow you to control video quality, format, bitrate, and effects, among other things. Transformations are very versatile, and Cloudinary will do all the hard work of transparently re-encoding your content just by changing the URL from which the content is served, which allows you to avoid uploading multiple versions of your content manually.
A standard link to an asset on Cloudinary doesn’t contain much other than a key pointing to the asset you want to serve, in this case, a video. For example:
https://res.cloudinary.com/demo/video/upload/docs/walking_talking
To add a transformation to this URL, you add them right before the key, which in this case is /docs/walking_talking. Let’s change the resolution of the video by specifying the width transform, which is w_480 if I want to make the width 480 pixels wide:
[https://res.cloudinary.com/demo/video/upload/w_480/docs/walking_talking(https://res.cloudinary.com/demo/video/upload/w_480/docs/walking_talking)
With that, the video now serves at the new resolution, and in this case, the height was automatically adjusted so that the aspect ratio remains the same. You can also apply more than one transformation on a video at once by adding a comma between your transformations. Let’s add an effect by adding e_blur.
https://res.cloudinary.com/demo/video/upload/w_480,e_blur/docs/walking_talking
Adjusting width and height can be useful for having more control over the size of your video content, but these are not the only options available. Let’s look at a few other transformations that can help optimize video.
First, let’s take a look at video quality. This is a parameter that can be controlled from the Default video quality field in the console under Settings > Product Environment Settings > Optimization. By default, this is set to Automatic – good quality which is equivalent to the q_80 transform being specified in your URL. You can either change this global setting to have it take effect everywhere or override it in the URL itself like so:
https://res.cloudinary.com/demo/video/upload/q_10/docs/walking_talking
Lowering the video quality will lower the file size at the expense of lowering the quality. In this example, I set a quality of 10, which is a very low quality. You can note this via the artifacts compared to q_80 video.
You can also transcode videos to other formats with parameters such as f_webm and f_mp4 or by changing the extension at the end of the URL:
https://res.cloudinary.com/demo/video/upload/f_webm/docs/walking_talking
In addition to the format, the video codec and profile can also be changed. For example, h264, a popular and widespread video codec, has “high”, “main”, and “baseline” profiles. You can specify these with vc_h264:high, vc_h264, and vc_h264:baseline:3.1 respectively.
When dealing with different devices that have differing support for the various codecs and formats, it’s important to make sure as many of them work as possible to be certain that your users can view your content. Thankfully <video> elements on the web support this through sources.
If we create a video element with multiple sources, the browser will work from top to bottom; looking for the first compatible source it can playback and start loading from there. The browser tells if a source will work by checking the type attribute value.
As you can see below, we have three sources listed in order from most efficient to least efficient. The type is just a hint for the browser to know which source to choose. The URLs for each source should have the correct parameters corresponding to the format being requested.
<video controls>
<source
src="https://res.cloudinary.com/demo/video/upload/q_auto,vc_h265,w_1280/docs/walking_talking.mp4"
type="video/mp4; codecs=hvc1"
/>
<source
src="https://res.cloudinary.com/demo/video/upload/q_auto,vc_vp9,w_1280/docs/walking_talking.webm"
type="video/webm; codecs=vp9"
/>
<source
src="https://res.cloudinary.com/demo/video/upload/q_auto,vc_h264:high,w_1280/docs/walking_talking.mp4"
type="video/mp4"
/>
</video>
Code language: HTML, XML (xml)If your browser supports H265 and HVC1, the first source should play. If that one is not supported, it will fall back to WebM and vp9, then to MP4 and H264. If you’re curious about what formats are supported on what browsers and devices, please use this reference.
For example, at the time of writing this article, H265 is fully supported on Safari, partially supported on Chrome and Edge, depending on the operating system, and unsupported on Firefox unless you enable an experimental flag.
Cloudinary offers powerful and flexible features that allow you to serve your video content to as many devices as possible while doing so as efficiently as possible. If you want to know more about what Cloudinary Video has to offer, then I recommend reading the full documentation, specifically the Video Optimization and Video Transformation pages.
