Community Blog How to Enable Multi Bit Rate Support in HLS in ApsaraVideo VOD

How to Enable Multi Bit Rate Support in HLS in ApsaraVideo VOD

In this blog, we will demonstrate the steps required to enable multi-bit rate support in HLS in ApsaraVideo VOD.

By Kenny Lai, Alibaba Cloud Solution Architect

HTTP Live Streaming (also known as HLS) is an HTTP-based adaptive bitrate streaming communications protocol developed by Apple Inc. and released in 2009. Support for the protocol is widespread in media players, web browsers, mobile devices, and streaming media servers. HLS resembles MPEG-DASH in that it works by breaking the overall stream into a sequence of small HTTP-based file downloads, each download loading one short chunk of an overall potentially unbounded transport stream. A list of available streams, encoded at different bit rates, is sent to the client using an extended M3U playlist.

ApsaraVideo for VOD is an all-in-one on-demand audio and video streaming solution. It automatically transcodes the collected, edited, and uploaded audio and video files based on the transcoding settings. It also allows you to edit mezzanine files online, manage media resources, and deliver media content to customers for playback with low latency. Backed by Alibaba Cloud's powerful infrastructure services, ApsaraVideo for VOD provides end-to-end video services to help enterprises and developers quickly build secure, elastic, and highly customizable video-on-demand (VOD) platforms and applications.

ApsaraVideo for VOD support of HLS with adaptive bitrate streaming. In this blog, we will demonstrate the steps required to enable multi bit rate support in HLS in ApsaraVideo VOD.

Step 1: Go to ApsaraVideo VOD

Log in to your Alibaba Cloud console and search for the ApsaraVideo VOD console. If you are having issues locating it, simply search for the terms "vod" in the search bar.


Step 2: Switch to Singapore Region

For this tutorial, I will be using an instance in the Singapore region.


Step 3: Bind Domain Name to VOD

Bind a domain name to VOD under Configuration Management. Navigate to Domain Names and click on Add Domain Name


Fill in the Information Accordingly


Click Submit. Wait until the CDN Configuration is done.



Step 4: Add Multibit Transcode Template

Navigate to Transcode section under Media Processing.



Add Video Packaging Template

Insert Template Group name: multibit


Rename the Video Template by clicking Edit


I have renamed my template to lowres


Click Add Template to add more resolution into the video packaging


Click Save to save the template.

Now you have a multi bit transcode template


Step 5: Enable HTTPS

In Configuration Management > CDN Configuration > Domain Names > HTTPS, click Modify


Ensure that HTTPS is turned on. You have to upload an SSL certificate here or via Alibaba Cloud SSL Certificate Service


Step 6: Upload Video to VOD

Go to Audio/Video and click Upload


Select the multibit transcode and upload the media.


Click upload to upload the mp4 video



Go to Video and Audio to check the transcode status


Wait until the status become Normal


Step 7: View Video URL

Click Manage


Click Video URL


Copy the URL of AUTO (adaptive bit rate url)

Step 8: Embed the Video into js player

Go to https://player.alicdn.com/aliplayer/setting/setting.html


Paste the URL into URL field

And go to Code Tab


Click Copy button to download the source code and paste into the web page

With Video package template created, the HLS will bundle multiple resolution streaming into single URL and HLS player can adjust the bit rate accordingly.

Note: replace the URL https://yourdomain.com/yourvodURL.m3u8 with your actual VOD AUTO url.

Sample HLS Adaptive bitrate HTL player sample code

<!DOCTYPE html>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge" >
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  <title>Aliplayer Functions</title>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
  <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
<div id="player-con"></div>
  var player = new Aliplayer({
    id: "player-con",
    source: "https://yourdomain.com/yourvodURL.m3u8",
    width: "100%",
    height: "500px",
    autoplay: true,
    isLive: false,
    language: "en-us"
  }, function (player) {
    console.log("The player is created");

That's it! To learn more about Alibaba Cloud ApsaraVideo for VOD, visit the official product page

The views expressed herein are for reference only and don't necessarily represent the official views of Alibaba Cloud.

0 0 0
Share on

Alibaba Clouder

2,600 posts | 754 followers

You may also like