Introduction
Differences between adaptive and multi bitrate streaming
Both adaptive and multi bitrate streams are published through multiple (usually three) 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.
CDN Live service publishing
There are two types of CDN Live services - with Pull Publishing and with Push Publishing. Please refer to Differences between pull and push publishing for more details. In the following we will describe all necessary steps for both CDN Live service types.
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 Live service with Pull or Push publishing
Please refer to Creating a CDN Live service for more details.
Publish to CDN Live service via Pull publishing (via your Wowza)
Set up your streaming server (Wowza) to publish through three different stream names. One stream name for each bitrate. Make sure that base URL (Origin URL) is always the same and only stream names are different as in the following example:
- mystream_1 - 480 Kbps, 640x480 px
- mystream_2 - 360 Kbps, 480x360 px
- mystream_3 - 240 Kbps, 320x240 px
rtmp://yourwowza.com/path-to-stream/mystream_1
rtmp://yourwowza.com/path-to-stream/mystream_2
rtmp://yourwowza.com/path-to-stream/mystream_3
Please note that your origin live streams have to be published over RTMP protocol in MP4 or FLV container format and encoded with H.264 video codec and AAC or MP3 audio codec.
Publish to CDN Live service via Push publishing (via your Adobe FMLE)
Let's assume that your new CDN Live service with Push publishing has the following properties (Please refer to Services/How-To).
- Server URL - rtmp://6534287788.publishstream.cdnsun.net/P6534287788
- Username - P6534287788
- Password - Kmx7s14We
Set up your Adobe Flash Media Live Encoder (configured to multiple outputs)
- On the Encoding Options tab define your desired multiple bitrates. If you plan to stream over HLS protocol then make sure that H.264 is selected as output format.
- On the right hand side in your FMLE fill in your Server URL rtmp://6534287788.publishstream.cdnsun.net/P6534287788 and choose your desired stream name (e.g. mystream) followed by _%i. Please note that %i is a wildcard for 1, 2, 3 as we have defined three outputs.
- Click on the Connect button and fill in your Username P6534287788 and Password Kmx7s14We.
- Finally click on the OK button.
Integrate into JW Player
Let's integrate your adaptive & multi bitrate CDN live stream via JW Player on your URL https://www.mycompany.com/index.html. Let's assume that 12345.r.cdnsun.net is the Service Identifier of your CDN Live service and that audio bitrate in all your three live streams is 32 Kbp.
Set CORS
Enable Cross Origin Resource Sharing (CORS). Please refer here for more details.
Set cross-domain policy
Set Cross-domain policy. Please refer here for more details.
Set Cache-Control
Set Cache-Control HTTP header value for .m3u8 and .ts files. Please refer here for more details.
Set MIME type
Set MIME type for .m3u8 and .ts files. Please refer here for more details.
RTMP protocol
Create a SMIL description file
Create a SMIL description file of your multiple bitrate live stream with the following content and upload it on your URL https://www.mycompany.com/multi.smil.
<smil> <head> <meta base="rtmp://6534287788.r.cdnsun.net/6534287788/_definst_" /> </head> <body> <switch> <video src="mystream_1" width="640" height="480" system-bitrate="524288" /> <video src="mystream_2" width="480" height="360" system-bitrate="401408" /> <video src="mystream_3" width="320" height="240" system-bitrate="278528" /> </switch> </body> </smil>
Please notice the difference between your (single bitrate) CDN RTMP URL
rtmp://6534287788.r.cdnsun.net/6534287788/_definst_/mystream
from the Services/How-To page and the RTMP URL above ("/mystream" at the end is missing). Also please ensure that all three "src", "width" and "height" attributes correspond to your settings in your Wowza or Adobe Flash Media Live Encoder. 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 live stream with the following content and upload it on your URL https://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 https://12345.r.worldssl.net/6534287788/_definst_/mystream_1/chunklist_w1.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=392000,RESOLUTION=480x360 https://12345.r.worldssl.net/6534287788/_definst_/mystream_2/chunklist_w2.m3u8 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=272000,RESOLUTION=320x240 https://12345.r.worldssl.net/6534287788/_definst_/mystream_3/chunklist_w3.m3u8
Please notice the difference between your (single bitrate) CDN HLS URL
https://12345.r.worldssl.net/6534287788/_definst_/mystream/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 Python, PHP, Ruby, etc.). Also please ensure that "width" and "height" attributes correspond to your settings in your Wowza or Adobe Flash Media Live Encoder. 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 (https://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.