In a previous post I was talking about Dynamic Packaging and Microsoft Azure Media Services. Now I want to show how to work with dash.js library designed to implement MPEG-DASH. It is based on the HTML 5 video tag and use JavaScript to create a context around.

The first thing you need is to download dash.js.

We can use this sample code, using HTML 5 video tag:

<section class="dash">
    <video id="video-dashjs" controls></video>
</section>
<script src="~/Scripts/dash.all.js"></script>
<script src="~/Scripts/App/dash.configuration.js"></script>
<script>window.onload = function(){dashPlayer.play();}</script>

dashPlayer is a JavaScript class that I created to encapsulate the player settings:

var dashPlayer = function (url) {
    var
        player = null,
        play = function () {
            var mediaURL = "http://[YOUR_MEDIA_ACCOUNT].origin.mediaservices.windows.net/[LOCATOR]/[FILE_NAME].ism/Manifest(format=mpd-time-csf)";
            var context = Dash.di.DashContext();
            player = new MediaPlayer(context);
            player.startup();
            player.attachView(document.querySelector("#video-dashjs"));
            player.attachSource(mediaURL);
        },
    stop = function () {
        player.videoModel.pause();
    };
    return {
        play: play,
        stop: stop
    };
}();

Hope this helps.

Happy streaming!