{"id":21744,"date":"2018-06-11T16:31:25","date_gmt":"2018-06-11T16:31:25","guid":{"rendered":"http:\/\/optimizing_video_with_cloudinary_and_the_html5_video_player_part_1"},"modified":"2025-03-09T12:14:01","modified_gmt":"2025-03-09T19:14:01","slug":"optimizing_video_with_cloudinary_and_the_html5_video_player_part_1","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/optimizing_video_with_cloudinary_and_the_html5_video_player_part_1","title":{"rendered":"Video Optimization, Part 1: Cloudinary and the HTML5 Video Player"},"content":{"rendered":"

Short-form videos<\/a>\u2014hero banners, product pages, ads, social content\u2014are 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.<\/p>\n

This article explains how to optimize videos to improve quality, make viewers happier, and above all improve performance<\/a> for websites and web applications.<\/p>\n

This is part of a series of articles about video format<\/a>.<\/p>\n

Video Optimization and High-Efficiency Coding Matter<\/h2>\n

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<\/strong> video, which, if encoded correctly as an H.264 MP4, would weigh 1.9 MB<\/strong> only. Encoding it with a more advanced codec, such as HEVC<\/a>, VP9, or AV1<\/a>, would yield even more compression.<\/p>\n

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?<\/p>\n

Cloudinary<\/a> 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.<\/p>\n

Take this original video at 8.67 MB:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\n \n\n\n\n <\/video><\/p>\n

That\u2019s a lot of bytes for a simple non-HD, 13-second-long video. Optimization is clearly called for.<\/p>\n

Enter the HTML5 Video Player and Cloudinary<\/h2>\n

First, have a look at the markup:<\/p>\n

<video controls>\n   <source src="https:\/\/res.cloudinary.com\/demo\/video\/upload\/q_auto,vc_h265,w_1280,c_limit\/dog.mp4" type="video\/mp4; codecs=hvc1">\n   <source src="https:\/\/res.cloudinary.com\/demo\/video\/upload\/q_auto,vc_vp9,w_1280,c_limit\/dog.webm" type="video\/webm; codecs=vp9">\n   <source src="https:\/\/res.cloudinary.com\/demo\/video\/upload\/q_auto,,w_1280,c_limit\/dog.mp4" type="video\/mp4"> \n<\/video>\n<\/code><\/pre>\n
With the intuitive HTML5 <video><\/code> 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\u2019re assured of optimal cross-browser support for video compression, ready for delivery to your audience.<\/p>\n
In the markup above, the first <source><\/code> element points to an H.265-encoded, i.e., HEVC-encoded, MP4 file<\/a>. 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)<\/a>. All other browsers would move on to the second <source><\/code>, VP9, a codec supported by Edge, Firefox, and Chrome<\/a>, gratifyingly bridging the big gaps in H.265 support.<\/p>\n
Though both H.265 and VP9 are similar in video-compression<\/a> capability, the result varies, depending on the video content, length, resolution<\/a>, 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.<\/p>\n
Note:<\/strong> 
Video optimization: To use modern codecs, leverage Cloudinary\u2019s automatic-format (f_auto<\/code>) feature to automatically identify the viewer\u2019s device and browser, also to adapt the video to the optimal format and codec, as in this transformed version of the dog video:<\/p>\n
<video src="https:\/\/res.cloudinary.com\/demo\/video\/upload\/q_auto,f_auto,w_1280,c_limit\/dog.mp4 controls"><\/code><\/p><\/div>\n
Understand the Determinants for User Experience<\/h2>\n
Why mount that effort to change video tags to encompass the list above? Three reasons:<\/p>\n