Cloudinary Blog

Video Optimization, Part 1: Cloudinary and the HTML5 Video Player

Optimizing Video With Cloudinary and the HTML5 Video Player

Short-form videos—hero banners, product pages, ads, social content—are popping up on the web in places never seen before. This trend could become challenging because of the many formats and codecs, let alone inadequate expertise on what best to adopt for web consumption. Nowadays, most people are familiar with image formats (JPG, PNG, and so forth), but ask them about High Efficiency Video Coding (HEVC), Vorbis, and VP9, and their eyes glaze over.

This article explains how to optimize videos to improve quality, make viewers happier, and above all improve performance for websites and web applications.

Video Optimization and High-Efficiency Coding Matter

Lack of experience and compression knowhow on the part of web developers can cause significant user-experience problems. For instance, while on a major retail site recently, I ran into a hero banner in the form of a 48-MB video, which, if encoded correctly as an H.264 MP4, would weigh 1.9 MB only. Encoding it with a more advanced codec, such as HEVC, VP9, or AV1, would yield even more compression.

Obviously, despite the demand and desirability of more video content, many developers have yet to catch up to the best practices. Just how do we get the best of both worlds without creating a bandwidth disaster like the one I just mentioned?


Sign up for Cloudinary free today!


Cloudinary offers a simple solution. Identifying the most suitable format for video delivery on the web and encoding it involves only adding a couple of parameters to the video URL.

Take this original video at 8.67 MB:

Ruby:
Copy to clipboard
cl_video_tag("dog")
PHP v1:
Copy to clipboard
cl_video_tag("dog")
PHP v2:
Copy to clipboard
(new VideoTag('dog.mp4'));
Python:
Copy to clipboard
CloudinaryVideo("dog").video()
Node.js:
Copy to clipboard
cloudinary.video("dog")
Java:
Copy to clipboard
cloudinary.url().videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog")
React:
Copy to clipboard
<Video publicId="dog" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >

</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp4")

That's a lot of bytes for a simple non-HD, 13-second-long video. Optimization is clearly called for.

Enter the HTML5 Video Player and Cloudinary

First, have a look at the markup:

Copy to clipboard
<video controls>
   <source src="https://res.cloudinary.com/demo/video/upload/q_auto,vc_h265,w_1280,c_limit/dog.mp4" type="video/mp4; codecs=hvc1">
   <source src="https://res.cloudinary.com/demo/video/upload/q_auto,vc_vp9,w_1280,c_limit/dog.webm" type="video/webm; codecs=vp9">
   <source src="https://res.cloudinary.com/demo/video/upload/q_auto,,w_1280,c_limit/dog.mp4" type="video/mp4"> 
</video>

With the intuitive HTML5 <video> tag, you can list multiple sources as format choices for the browser. The browser then goes through the list, starting at the top, until it finds a version it can play. That way, you’re assured of optimal cross-browser support for video compression, ready for delivery to your audience.

In the markup above, the first <source> element points to an H.265-encoded, i.e., HEVC-encoded, MP4 file. The reason for the top billing is that H.265 is about 30 percent more efficient than the universally supported standard, H.264 (aka AVC). However, H.265 currently works only on Safari (both desktop and mobile). All other browsers would move on to the second <source>, VP9, a codec supported by Edge, Firefox, and Chrome, gratifyingly bridging the big gaps in H.265 support.

Though both H.265 and VP9 are similar in video-compression capability, the result varies, depending on the video content, length, resolution, and other factors. Nonetheless, both codecs do a far better job of compression than H.264. Be sure to list them as the first and second choices for the browser, leaving that old standard from 2003, MP4, as the third option for all outlier browsers that support neither H.265 nor VP9.

Note
Video optimization: To use modern codecs, leverage Cloudinary’s automatic-format (f_auto) feature to automatically identify the viewer’s device and browser, also to adapt the video to the optimal format and codec, as in this transformed version of the dog video:

<video src="https://res.cloudinary.com/demo/video/upload/q_auto,f_auto,w_1280,c_limit/dog.mp4 controls">

Understand the Determinants for User Experience

Why mount that effort to change video tags to encompass the list above? Three reasons:

  • File size. The file size of the dog video in each of the codecs is as follows, all delivering the same visual quality:

    • H.264: 801 KB
    • VP9: 515 KB
    • H.265: 436 KB

    Encoding the video with H.265 or VP9 instead of H.264 yields a significant savings of approximately 300 KB, meaning that you’d deliver the same video quality much faster. Alternatively, you could leverage some of the saved bytes to encode for a higher quality. Of course, the choice is yours. Perhaps do an A/B test—A for less bandwidth overhead and B for more compelling visuals—and see what your visitors prefer?

  • The q_auto transformation parameter. q_auto tells Cloudinary to automatically find and adopt the right balance between quality and file size. Being content aware, the adjustment varies between simple one-shot videos and complex action scenes. You can control that tradeoff by specifying the desired quality according to this syntax: q_auto:quality, where quality is best, good, eco, or low, e.g., q_auto:best.

  • The w_1280,c_limit transformation. The width (w) parameter tells Cloudinary to resize the video to a width of, in this example, 1,280 px. unless the original is narrower, which is the case of the dog video. That way, you avoid delivering an oversized video, like a 4K-wide footage, which most screens cannot fully display. It’s a good idea to specify a ballpark value, but feel free to change 1280 to whatever you desire.

Try Out the Optimization Feature

Do experiment with the HTML markups in the example above. Be sure to replace cloud_name with your account’s cloud name and the video’s public ID (public_id) with the one that identifies your video. You can then rest assured of the best possible user experience.

Preview Part 2

Part 2 of this series will describe how adaptive bitrate streaming plays into this topic and recommend the proven ways for optimizing longer-form videos. In the meantime, check out our Video Transformation Reference Guide.


Want to Learn More About Video Optimization?

Guides on Performance Testing

We have authored in-depth guides on three topics that relate to performance testing.

Image Optimization

Images and videos take up most of the page-load time on most websites. To make your website load faster and improve user experience and engagement, be sure to reduce the file size of images without hurting quality.

See these top articles in our Image Optimization Guide:

Lazy Loading

Lazy loading means displaying page elements just in time as the viewer scrolls down, dramatically improving page performance. That way, you optimize the loading of page elements and avoid needlessly loading elements the viewer doesn’t need to see

See these top articles in our Lazy Loading Guide:

Image Formats

Advancements in image- and video-compression techniques have resulted in new formats like WebP and JPEG 2000, which deliver superior quality with a smaller file size. This guide describes traditional image and video formats, the benefits of the modern ones, and how to take advantage of them in your websites and web applications.

See these top articles in our Image Formats Guide:

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more