Using a CDN Video service for adaptive and multi bitrate streaming

Introduction

Differences between adaptive and multi bitrate streaming

Both adaptive and multi bitrate streams are published through multiple (usually 3) streams with the same content but in different bitrates (high quality, medium quality and low quality).

  • Adaptive Bitrate Streaming (ABR) - bitrate is adjusted automatically based on viewer's available bandwidth.
  • Multi Bitrate Streaming (MBR) - viewer can change bitrate using player's menu.

JW Player

The JW Player can be configured to support both adaptive and multi bitrate streaming together. JW Player is in adaptive bitrate mode when Auto is selected in player's menu and in addition viewer can change bitrate using the same menu.

Differences between adaptive and multi bitrate streaming

Supported streaming protocols

In the following we will describe all necessary steps for RTMP and HLS protocols. Please refer to Supported CDN streaming protocols and formats for more details.

Create a CDN Video or CDN Video Push service

Please refer to Creating a CDN Video service for more details.

Upload your multiple bitrate videos

Let's assume that you have the following three videos on your Origin Domain or Origin Storage.

  • myvideo_1.mp4 - 480 Kbps, 640x480 px
  • myvideo_2.mp4 - 360 Kbps, 480x360 px
  • myvideo_3.mp4 - 240 Kbps, 320x240 px

Please note that your videos must be in MP4 or FLV container format and encoded with H.264 video codec and AAC or MP3 audio codec.

Integrate into JW Player

Let's integrate your adaptive & multi bitrate CDN on-demand stream via JW Player on your URL http://www.mycompany.com/index.html. Let's assume that 3847984304.r.cdnsun.net is the Service Identifier of your CDN Video or Video Push service and that audio bitrate in all your three videos is 32 Kbps.

Set CORS

Enable Cross Origin Resource Sharing (CORS) for .m3u8 files. Please refer here for more details.

Set cross-domain policy

Create a crossdomain.xml file and upload it on the URL http://www.mycompany.com/crossdomain.xml. Please refer here for more details.

Set Cache-Control for .m3u8 files

Set Cache-Control HTTP header value to no-cache for .m3u8 files. Please refer here for more details.

Set MIME type for .m3u8 files

Set MIME type to application/vnd.apple.mpegurl for .m3u8 files. Please refer here for more details.

RTMP protocol

Create a SMIL description file

Create a SMIL description file of your multiple bitrate on-demand stream with the following content and upload it on your URL http://www.mycompany.com/multi.smil.

<smil>
<head>
<meta base="rtmp://3847984304.r.cdnsun.net/3847984304/_definst_" />
</head>
<body>
      <switch>
          <video src="mp4:3847984304/myvideo_1.mp4" width="640" height="480" system-bitrate="524288" />
          <video src="mp4:3847984304/myvideo_2.mp4" width="480" height="360" system-bitrate="401408" />
          <video src="mp4:3847984304/myvideo_3.mp4" width="320" height="240" system-bitrate="278528" />
      </switch>
</body>
</smil>

Please notice the difference between your (single bitrate) CDN RTMP URL

rtmp://3847984304.r.cdnsun.net/3847984304/_definst_/mp4:3847984304/myvideo.mp4

from the Services/How-To page and the RTMP URL above ("/myvideo.mp4" at the end is missing). Also please ensure that all three "src", "width" and "height" attributes correspond to your video files. For "system-bitrate" please use the following formulae. 

system-bitrate = (audio + video bitrate in Kbps) * 1024

For example 278528 = (240 + 32) * 1024. Note that the "system-bitrate" has to be in 1024 base thus we really need to multiply by 1024 and not by 1000.

HLS protocol

Create an m3u8 description file

Create an m3u8 description file of your multiple bitrate on-demand stream with the following content and upload it on your URL http://www.mycompany.com/multi.m3u8.

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-ALLOW-CACHE:NO
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=512000,RESOLUTION=640x480
http://3847984304.r.cdnsun.net/3847984304/_definst_/mp4:3847984304/myvideo_1.mp4/chunklist_w1.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=392000,RESOLUTION=480x360
http://3847984304.r.cdnsun.net/3847984304/_definst_/mp4:3847984304/myvideo_2.mp4/chunklist_w2.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=272000,RESOLUTION=320x240
http://3847984304.r.cdnsun.net/3847984304/_definst_/mp4:3847984304/myvideo_3.mp4/chunklist_w3.m3u8

Please notice the difference between your (single bitrate) CDN HLS URL

http://3847984304.r.cdnsun.net/3847984304/_definst_/mp4:3847984304/myvideo.mp4/playlist.m3u8

from the Services/How-To page and the HLS URLs above. The chunklists must be in the format chunklist_wNUMBER.m3u8 where NUMBER is an integer between 1 and 9999999999. Additionally the NUMBERs must be unique within the file. It is also recommended to generate them randomly for every request (using PHP, Ruby, Python, etc.). Also please ensure that "width" and "height" attributes correspond to your video files. For "BANDWIDTH" please use the following formulae. 

BANDWIDTH = (audio + video bitrate in Kbps) * 1000

For example 272000 = (240 + 32) * 1024.

Use the SMIL and m3u8 files in JW Player

Add the following code to the page where you plan to embed JW Player (http://www.mycompany.com/index.html).

<script type="text/javascript" src="https://www.mycompany.com/jwplayer/8/30/jwplayer.js"></script>
<script>jwplayer.key="my_jwplayer_license_key";</script>

<div id="mediaplayer"></div>

<script type="text/javascript">
    jwplayer("mediaplayer").setup({                           
        'playlist': [{
             'sources': [
                {
                    'file': '/multi.smil'
                },
                {
                    'file': '/multi.m3u8'
                }
             ]
        }],                
    });
</script>

That's all.

Contact Us

  _____      ___     _____    
 /  ___||   / _ \\  |  __ \\  
| // __    | / \ || | |  \ || 
| \\_\ ||  | \_/ || | |__/ || 
 \____//    \___//  |_____//  
  `---`     `---`    -----`