{"id":21501,"date":"2017-04-10T16:35:15","date_gmt":"2017-04-10T16:35:15","guid":{"rendered":"http:\/\/how_to_implement_smooth_video_buffering_for_a_better_viewing_experience"},"modified":"2025-09-29T15:22:11","modified_gmt":"2025-09-29T22:22:11","slug":"how_to_implement_smooth_video_buffering_for_a_better_viewing_experience","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_implement_smooth_video_buffering_for_a_better_viewing_experience","title":{"rendered":"How to Implement Smooth Video Buffering for a Better Viewing Experience"},"content":{"rendered":"

In the early days of the web, the only thing that mattered was getting that content out to users no matter how long it took or what resources it consumed. As a matter of fact, users seemed to understand and were ready to wait till whenever their browser\u2019s loading spinner stops and the contents displayed.<\/p>\n

Today, though, users\u2019 patience has run out. They are no longer willing to wait because they know we \u2013 the engineers \u2013 can afford to give them a better experience.<\/p>\n

While web content comes in different forms, today we will focus on video. Video optimization<\/a> and delivery of a good viewing experience to users doesn\u2019t come easy. Yes, flash is gone and HTML5 is here to stay; but don\u2019t expect that you can just drop the video tag in your HTML and you\u2019re done.<\/p>\n

Let\u2019s take a look at a common approach to delivering videos, popularly known as buffering<\/a>.<\/p>\n

What Video Buffering Is and Why Use It<\/h2>\n

Most videos on the web do something that looks like a pre-fetch. You may notice the progress bar showing another indicator that is greater than or equal to the current play time. This is what Youtube<\/a>\u2019s streaming looks like:<\/p>\n

\"YouTube\"<\/p>\n

The light gray portion of the progress bar indicates the buffered content.<\/p>\n

YouTube dynamically adjusts the quality of that portion depending on the bandwidth and CPU capacity it detects. For example, if the bandwidth is poor, YouTube will pre-fetch the low-quality version of the above video. On the other hand, if the bandwidth is great, it would pre-fetch the high-quality version for rendering.<\/p>\n

Put this together and users have a great experience whether or not their connectivity is superb or poor.<\/p>\n

Note:<\/strong>

The key thing to keep in mind is not the fact that the video is pre-fetched, but rather that the pre-fetching is achieved with an intelligent strategy.<\/p><\/div>\n

Now that we have a basic understanding of what buffering is, let\u2019s see how we can employ an intelligent strategy that entails buffering based on the bandwidth or CPU capacity conditions.<\/p>\n

Meet Cloudinary\u2019s Adaptive Bitrate Streaming (HLS & MPEG)<\/h2>\n

Cloudinary offers a game-changing concept known as adaptive bitrate streaming (ABS), which is a video delivery technique that adjusts the quality of a video stream in real time according to detected bandwidth and CPU capacity. This approach enables videos to start quicker, with fewer slow video buffering interruptions and at the best possible quality for the current device and network connection, to maximize user experience.<\/p>\n

Videos provisioned using ABS are provided in versions known as representations, each with different quality and bitrates<\/a>. Each video file must be accompanied by an index file that specifies predefined segments of the video. Additionally, there is a master playlist that points to the available representations with additional information about each one.<\/p>\n

\"HLS\"<\/p>\n

You can use this Cloudinary feature to deliver a better viewing experience for your users at no cost.<\/p>\n

To deliver videos using adaptive streaming, Cloudinary generates multiple copies of your video prepared at different resolutions, qualities and data rates. The copies of the videos are then automatically generated and delivered from a single original video, transcoded to either or both of the following protocols:<\/p>\n