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:

[html]<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>[/html]

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

[js]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
};

}();[/js]

Hope this helps.

Happy streaming!