I highly recommend to read these following posts before continuing on this.
Once your media is ready to be streamed we need some mechanism for the ABR playback in the browser without any plugins. Because HTML 5 video tag does not perform ABR and it just performs progressive download. (This is explained in the first link above).
MPEG DASH is the protocol / standard to stream ABR playback using HTML 5.
YouTube adapted this in January 2015.
Creating a DASH player is a custom implementation since W3C defines it in the MSE (Media Source Extensions) as a standard.
Dash.js – https://github.com/Dash-Industry-Forum/dash.js
is an open source project which helps to build the DASH player. The source contains samples ranging from simple streaming to complex samples like captioning and ad insertion.
Azure Media Player (AMP)
Azure Media Player is an implementation of a DASH player adhering to MSE and EME (Encrypted Media Extensions). AMP is also provides fallback mechanism to play the media using Flash / Silverlight when DASH is not supported by the browser. It has a limitation of it will only playback the media streamed from Azure Media Services, but for the intended purpose it serves very well.
Read documentation of AMP here. http://amp.azure.net/libs/amp/latest/docs/
You can check a sample online AMP here. http://amsplayer.azurewebsites.net/azuremediaplayer.html
Simple implementation of AMP using DASH without any fallback mechanisms would look very similar to the below code snippet.
Versatile Digital DNA 