Cloudinary Blog
Automatic Video Transcoding

Delivering video files to users can be a much more complex undertaking than many people stop to consider. There are a large variety of video formats and codecs to choose between, and various optimization parameters for encoding the videos. Parameters such as bitrate, key-frame-interval, and frame-rate will have an effect on the visual quality and bandwidth requirements when delivering the video file. To make matters worse, there are so many potential viewing devices out there (desktops, laptops, tablets, mobiles, wearables, etc). Each of these devices have different browsers or apps, and they all support different formats and codecs!

Unfortunately, there is no single format or codec that is ideal for all end users. Selecting a format and codec that is supported by all browsers and devices will actually affect quality and user-experience. Since some formats are better than others at compression and reducing the file size without impairing visual quality, the best solution to save bandwidth and optimize delivery time would be to deliver the best format according to the browser used by each of your visitors.

globalstats

(Image courtesy of https://www.w3counter.com/globalstats.php)


Sign up for Cloudinary free today!


Introducing Automatic Video Transcoding

Let Cloudinary do the job of automatically selecting the best codec and format for you. The automatic format selection feature for images has now been extended to offer the same functionality for videos as part of our Dynamic Video Platform solution. Cloudinary identifies the end-user device and browser and then delivers the best video format and codec for that particular user. The feature currently supports selecting between the H.264, HEVC and VP9 codecs and is future-proofed for adding next-generation codecs such as AV1.

So take the complexity out of managing videos because adding this functionality is as simple as adding the fetch_format parameter set to auto (f_auto in URLs). This tells Cloudinary to perform automatic format and codec selection based on the requesting browser. For example, with the automatic video format feature, in most cases Chrome users would receive a VP9-encoded WebM file, while Safari users would receive an HEVC-encoded MP4 file. If a requesting browser does not support either of these formats, then the video would be delivered as an H-264 encoded MP4 file, which is supported by almost every browser.

For example, the kitten_playing video is scaled down to a width of 500 pixels and delivered as:

  • WebM (VP9) to Chrome browsers (1412 KB),
  • MP4 (HEVC) to Safari browsers (1411 KB),
  • MP4 (H.264) to browsers that support neither format (3172 KB)

Ruby:
Copy to clipboard
cl_video_tag("kitten_play", :fetch_format=>:auto)
PHP v1:
Copy to clipboard
cl_video_tag("kitten_play", array("fetch_format"=>"auto"))
PHP v2:
Copy to clipboard
(new VideoTag('kitten_play'))
  ->delivery(Delivery::format(Format::auto()));
Python:
Copy to clipboard
CloudinaryVideo("kitten_play").video(fetch_format="auto")
Node.js:
Copy to clipboard
cloudinary.video("kitten_play", {fetch_format: "auto"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().fetchFormat("auto")).videoTag("kitten_play");
JS:
Copy to clipboard
cloudinary.videoTag('kitten_play', {fetchFormat: "auto"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("kitten_play", {fetch_format: "auto"})
React:
Copy to clipboard
<Video publicId="kitten_play" >
  <Transformation fetchFormat="auto" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="kitten_play" >
  <cld-transformation fetchFormat="auto" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="kitten_play" >
  <cl-transformation fetch-format="auto">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().FetchFormat("auto")).BuildVideoTag("kitten_play")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().fetchFormat("auto")).resourceType("video").generate("kitten_play.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setFetchFormat("auto")).generate("kitten_play.mp4")

Combine with Content-Aware Video Compression

Even better, you can combine the automatic format selection feature (f_auto) with Cloudinary's automatic quality feature (q_auto) for even better results. Cloudinary's intelligent quality and encoding algorithm analyzes a video to find the best quality compression level and optimal encoding settings based on the video content. The result is a video with good visual quality while minimizing the file size. For example, the same kitten_playing video delivered with f_auto alone in the example above, now delivered with f_auto and q_auto together would produce a more optimized result:

Format (and codec) f_auto f_auto, q_auto
WebM (VP9) 1412 KB 1271 KB
MP4 (HEVC) 1411 KB 1355 KB
MP4 (H.264) 3172 KB 2876 KB

Ruby:
Copy to clipboard
cl_video_tag("kitten_play", :quality=>"auto", :fetch_format=>:auto)
PHP v1:
Copy to clipboard
cl_video_tag("kitten_play", array("quality"=>"auto", "fetch_format"=>"auto"))
PHP v2:
Copy to clipboard
(new VideoTag('kitten_play'))
  ->delivery(Delivery::format(Format::auto()))
  ->delivery(Delivery::quality(Quality::auto()));
Python:
Copy to clipboard
CloudinaryVideo("kitten_play").video(quality="auto", fetch_format="auto")
Node.js:
Copy to clipboard
cloudinary.video("kitten_play", {quality: "auto", fetch_format: "auto"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().quality("auto").fetchFormat("auto")).videoTag("kitten_play");
JS:
Copy to clipboard
cloudinary.videoTag('kitten_play', {quality: "auto", fetchFormat: "auto"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("kitten_play", {quality: "auto", fetch_format: "auto"})
React:
Copy to clipboard
<Video publicId="kitten_play" >
  <Transformation quality="auto" fetchFormat="auto" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="kitten_play" >
  <cld-transformation quality="auto" fetchFormat="auto" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="kitten_play" >
  <cl-transformation quality="auto" fetch-format="auto">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Quality("auto").FetchFormat("auto")).BuildVideoTag("kitten_play")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().quality("auto").fetchFormat("auto")).resourceType("video").generate("kitten_play.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setQuality("auto").setFetchFormat("auto")).generate("kitten_play.mp4")

Try it out

Check out the Cloudinary demo page for video format optimization if you would like to see the file size difference between videos delivered in different formats. You can select one of the videos on the page or upload your own video to encode in various formats. Of course, the Cloudinary automatic format feature will do all the work for you and also decide which format your user should get based on their browser.

video format optimization

Tip
You can also visit our video comparison page to compare the visual quality between any two videos, or in this case, any two video formats.

Summing up

Delivering a video in the best format can be easily automated with Cloudinary's format selection feature. The functionality can also be combined with automatic quality selection for a powerful and dynamic solution that delivers all your videos using minimal bandwidth and maximum visual quality. For more details, see the automatic format selection documentation.

All video manipulation and delivery features discussed here are available with no extra charge for all Cloudinary's plans, including the free plan.

Note
The automatic video transcoding feature is enabled by default for all new accounts, and is currently being rolled out for existing accounts. If you are an existing customer and want access to this feature before it is rolled out to you, please contact support.

You might also be interested in:

Recent Blog Posts

The Pros and Cons of AVIF for Websites

AVIF is a 2019 spinoff from the AV1 video format developed by the Alliance for Open Media (AOM), whose members include Amazon, Apple, ARM, Facebook, Google, Huawei, Mozilla, Microsoft, Netflix, and Intel. As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP, and is on par with the brand-new JPEG-XL format, which does not work on any browser yet.

Read more
Get Your Media Moving Faster with Cloudinary’s Media Optimizer

So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...

Read more
How to Tap Into the Value of User-Generated Content (UGC)

User-generated content (UGC) took off with, first of all, the advent of the internet and, subsequently, social networks. Everyday consumers were given keys to the kingdom, so to speak, so that they, too, could compose and post content, simultaneously engaging with others online. Twitter, Facebook, Instagram, Snapchat, TikTok—the networks through which we can create and publish content have grown exponentially, and brands are becoming aware of the benefits of tapping into the gold mines offered by those networks.

Read more
Identifying Countries by IP Address in Columnar Databases Through SQL

Cloudinary reaps a myriad of open web traffic, from ad networks to e-commerce sites. Our Data Science team is dedicated to analyzing the data for use internally and externally.

A glance at any General Data Protection Regulation (GDPR) article would reveal that—unlike Android device IDs (AID), through which users can reset their web address—keeping user identifiers, such as Internal Protocol (IP) and Media Access Control (MAC) addresses, as well as International Mobile Equipment Identity (IMEI), violates privacy. As a solution, you can discard all privacy identifications or make them visible to users for reset.

Read more
Digital-First Asset Management Explained

As the world changes, so does technology. I don’t need to name more than a handful of antiquated technologies before you nod in agreement: floppy disks, Walkmans, phone booths, VHS tapes, each of which have been phased out or rendered useless by new solutions that meet the same need but much more effectively.

Read more