Create HLS Web Player with Adaptive Bitrate

In this tutorial, we’ll walk through the steps to create an HLS player with adaptive bitrate using Callaba.

Adaptive Web Player automatically adjusts video quality based on the viewer’s internet connection for a smoother experience. It also allows viewers to choose their preferred resolution.

Key features

✅  Adaptive video playback that adjusts to each viewer's bandwidth.

✅  Clusterable OTT/VOD hosting from any source.

✅  Multi-bitrate streaming with hardware acceleration—deploy a player with just a few clicks.

1. Create a new Web Player

First, go to the Web Players section in Callaba.

Click "Add New" to create a new player.

Name: Give your player a name, so it’s easy to recognize.

Specify your video source

Now it’s time to select the video source.

There is a whole list of different available input options to choose from.

For example, you can specify your local SRT or RTMP server as input.

Or if a client provides you with an HLS URL, you can use that URL as your source.

To illustrate this last case, we’ll use a test URL from Theo Player.

So we'll set our input to 'HLS URL,' copy the test URL, and set it as the input for the player.

2. Enable Adaptive Bitrate

To enable adaptive bitrate, unfold "Adaptive Bitrate Settings".

Select the original resolution of your video (for example, 1080p).

Please keep in mind, adaptive bitrate only supports downscaling, so it won’t upscale your video to a higher resolution.

Set up Transcoding

Next, we’ll need to set up transcoding to make the system encode multiple versions of the video at various bitrates.

Unfold Video Settings and configure transcoding here.

This will let your video automatically adjust to different network speeds.

3. Save and Preview

Once you’ve set everything up, click Save.

Now you can click Preview (the play button) to view your stream and verify that the adaptive bitrate is working.

4. Share the Player

To share this player, click "Info".

Here, you’ll find a Web Player URL that you can share directly with viewers.

And that’s it! Your HLS player is now ready for adaptive streaming.

You've successfully created an HLS player with adaptive bitrate in Callaba.

Now you have an HLS player with adaptive bitrate set up in Callaba, ready for consistent video quality across different devices and connection speeds.

This setup provides a solid viewing experience for your audience, whether for live or on-demand content. Test it out and see the impact of adaptive bitrate on your video delivery.

This is the end of our tutorial.

Learn more

• How to launch Callaba on Amazon Web Services
• How to create a playlist of videos with Pay Per View monetization
• Multilingual Web Player
• Set up SRT backup stream in case of main stream interruption

Follow us on social media

LinkedIn • Reddit • Instagram • Facebook • Youtube • X (Twitter) • Discord