How 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>
<html>
<head>
  <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>
</head>
<body>
<div id="player-con"></div>
<script>
  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");
  });
</script>
</body>
</html>

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.

Community

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

Step 1: Go to ApsaraVideo VOD

Step 2: Switch to Singapore Region

Step 3: Bind Domain Name to VOD

Step 4: Add Multibit Transcode Template

Step 5: Enable HTTPS

Step 6: Upload Video to VOD

Step 7: View Video URL

Step 8: Embed the Video into js player

Read previous post:

Read next post:

Alibaba Clouder

You may also like

Comments

Alibaba Clouder

Related Products

ApsaraVideo VOD

ApsaraVideo Live

ApsaraVideo Media Processing

Real-Time Streaming