Adaptive Streaming Using Javascript


Adaptive streaming – a simple explanation of how it works

Adaptive streaming (also known as adaptive bitrate streaming) is a technology designed to deliver video to the user in the most efficient way possible and in the highest usable quality for each specific user. To explain adaptive streaming as simply as possible it is best to start by explaining what adaptive streaming is NOT. Namely, progressive streaming.

Adaptive streaming allows the video provider to create a different video for each of the screen sizes (or devices) that he or she wishes to target. The diagram below very simply shows how that works. As you can see, we can stream a specific video file to fit specific screen sizes, ensuring that the viewer always receives a video that will look good.

Features of adaptive streaming

Adaptive streaming is a video streaming technique that detects a viewer’s bandwidth and CPU capacity in real-time and adjusts the stream video quality accordingly. It provides the highest quality stream that is supported by the viewer’s device and the internet connection.

The real power of adaptive bitrate streaming is that it “adapts”

The next concept to understand is “adaption”. These settings and decisions about which video is best for each specific user can be changed from second to second. This means that as a user’s internet connection changes, the adaptive stream will switch back and forth between video qualities. How does this magic happen? This is achieved with the use of segments. Segments are really at the heart of adaptive streaming.

When a video file is encoded to adaptive format, it is broken up into segments. These are short snippets of video, often set to 4 seconds long (although they can be longer or shorter). At the end of each 4-second segment, the Player can switch to a different video file if necessary.

Here is an example: Let’s imagine that a child is in the back seat of her parents’ car is watching a Youtube video on an iPad via a mobile network. The video is streaming at 854 x 480 pixels with no problems. But then, the road goes down into a valley, and the quality of the mobile network connection drops. The data starts flowing more slowly. (Remember that we need to download 24 frames per second.)  If the video was a progressive video, there would be no hope. It would simply stop. But in this example, the child watches an adaptive video, through an Adaptive video player The Adaptive Player recognizes that the data is coming too slowly, and reacts to avoid buffering. It switches to a video file that is small enough to ensure the child’s iPad will receive the required 24 frames per second to continue playing the video without interruption.

How adaptive streaming works

How do you use adaptive bitrate for streaming?When a video file is encoded to adaptive format, it is broken up into segments. These are short snippets of video, often set to 4 seconds long (although they can be longer or shorter). At the end of each 4-second segment, the Player can switch to a different video file if necessary.

Adaptive Bitrate Streaming (ABR): Optimizing the User Experience

What is a Bitrate for Streaming?

The bitrate of a stream refers to the speed for transferring video data to a user’s device. The standard measure for a bitrate for streaming video is megabits per second (Mbps), which differs from a video’s file size measured in megabytes (MBps).

In general, a higher bitrate means the video quality will be better, but if it exceeds a user’s bandwidth—also measured in Mbps—then buffering can occur. Buffering means the video player cannot download the video file fast enough to keep the video playing at normal speed.


Adaptive Bitrate Streaming (ABR): Optimizing the User Experience

Video Preparation

First, the video content needs to be prepped for ABR live streaming. An encoder needs to encode the video into several bitrates depending on the target streaming profile. Most online video platforms are capable of transcoding videos into multiple formats from a single source file.

Each of these encoded video files needs to be segmented into multi-second parts. The size of these video chunks varies depending on the implementation, but they’re generally between 2 and 10 seconds each. This approach works well with HTTP-based streaming protocols that progressively download video content.

2. Initial Startup

Before a video player can begin playback, it downloads a manifest file that describes the video chunks and bitrates available. This manifest file— .m3u8 playlist for HLS and media presentation description (MPD) for DASH—contains the information that makes up a streaming profile, which we’ll cover later on.

The video player can simply use the manifest as a guide to request the video assets that are most suitable for the user’s device and connection. Then, it begins playback immediately when there’s enough media content available in the local buffer.

The benefit of streaming video over HTTP is that the content can be stored and delivered from an ordinary web server. That means ABR works well with content delivery networks (CDNs) to further reduce latency, lower packet loss, and increase delivery speed. 

3. Dynamic Playback

Video players usually start streaming at the lowest bitrate and request higher or lower quality video chunks as network conditions change. Each player has its own algorithm for deciding which bitrates to download next.

There are two common types of selection algorithms that video players use: throughput and buffer. Throughput-based algorithms measure the download speed of previous video chunks to determine which bitrate to choose next. The problem is that a throughput estimate may not match the encoder bitrate during live streams.

Buffer-based algorithms attempt to control the buffer occupancy to ensure there’s always enough video ready for playback. If the local buffer is running out of media, the next bitrate will be lower to keep ahead of playback. The problem is knowing how far to lower the bitrate to fill the buffer without downgrading quality too much.

Some adaptive players even offer a hybrid of the two. For example, the oplayer continually evaluates its downloading speed and may switch bitrate mid-download to keep the buffer occupancy high. Over the coming years, more advanced algorithms using machine learning may gain traction as well.

Adaptive Bitrate Streaming (ABR): Optimizing the User Experience

What is Adaptive Streaming Using JavaScript?

As we mentioned before, the video player is crucial for enabling ABR live streaming. HTML5 players—including Video.js and other javascript video players—have the ability to stream ABR out of the box. That means they’re adaptive video players.

Along with using an ABR algorithm to choose which video stream bitrate to use, adaptation video players also select a video file that fits the device’s screen. This ensures the user will always see a video that looks good.

For broadcasters, JavaScript and HTML5 video players that support ABR is invaluable. These players not only offer a better user experience, but they’re also built into web browsers and universally accessible on nearly any device. That means adaptive streaming using JavaScript enables brands to reach more viewers.

The Benefits of Adaptive Playback

An adaptive streaming profile contains all the stream variants for a video.

The primary benefit of adaptive bitrate streaming is an improved Quality of experience Broadcasters can offer the highest quality video possible for their viewers without risking buffering or other interruptions to the experience.

Along with smoother streams, ABR offers a faster startup. Since ABR streams usually start with a low bitrate stream until the selection algorithm estimates bandwidth capacity or buffering occupancy, the video is able to begin playback immediately. That means brands don’t need to worry about losing viewers due to slow loading times.

ABR adaptive bitrate streaming also improves the viewing experience on smartphones and tablets. In the past, data plan limitations and low device processing power made streaming video on-the-go a challenge for broadcasters. ABR ensures mobile users are able to watch video streams without buffering despite these potential limitations. 

Since ABR streams utilize HTTP for delivery, it works with most web servers and CDNs. That means it’s cheaper than setting up specialized servers or keeping persistent connections open. Using ABR streaming, therefore, can be a cost-effective way to scale while maintaining a high-quality streaming experience.

When a user has a poor streaming experience, they’re more likely to view your brand negatively. That limits the opportunity for advertising and monetization down the line. That’s why ABR is crucial for today’s broadcasters.


Broadcasters need to be prioritizing their user experience, and ABR live streaming is a surefire way for users to view the highest quality stream possible on nearly any device. ABR streaming has created new user expectations that require the right streaming technology to meet.

As a comprehensive over the top (OTT) streaming platform Dacast makes it straightforward to deliver ABR streams with its flexible encoding capabilities and HTML5 adaptive video player. That’s why the platform was nominated as the best platform for Small/Medium Business Platform in the 2019 Streaming Media Readers’ Choice Awards.

drop your comment


Author: refuge_2020

Leave a Reply

Your email address will not be published. Required fields are marked *