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!