MPEG-DASH Tutorial: Embedding an adaptive streaming video within your HTML5 application

Poor quality streaming video solutions resulted in an estimated $2.16 Billion of lost revenue in 2012 (according to the 2013 Conviva Viewer Experience Report). That’s a LOT of zeros!

Since we at Microsoft Open technologies, Inc. (MS Open Tech) believe this is simply unacceptable, we’d like to share some ways in which developers can leverage open source code to ensure their own delivery of video is of the highest possible standard.

For this tutorial, we have chosen to use the dash.js player to deliver MPEG-DASH video to any browser that supports the W3C Media Source Extensions (MSE).

What is MPEG-DASH and dash.js?

MPEG-DASH is an ISO standard for the adaptive streaming of video content, which offers significant benefits for those who wish to deliver high-quality, adaptive video streaming output. Many of these benefits directly address opportunities for improving user engagement identified in the Conviva report, such as:

  • 226% increase in video consumption given a buffer-less experience
  • Fourfold increase in likelihood of watching the video if start-up is less than two seconds
  • 25% increase in consumption for higher quality streams

With MPEG-DASH, the video stream will automatically drop to a lower definition when the network becomes congested. This reduces the likelihood of the viewer seeing a "paused" video while the player downloads the next few seconds to play (aka buffering). As network congestion reduces, the video player will in turn return to a higher quality stream. This ability to adapt the bandwidth required also results in a faster start time for video. That means that the first few seconds can be played in a fast-to-download lower quality segment and then step up to a higher quality once sufficient content has been buffered.

Dash.js is an open source MPEG-DASH video player written in JavaScript. Its goal is to provide a robust, cross-platform player that can be freely reused in applications that require video playback. It provides MPEG-DASH playback in any browser that supports the W3C Media Source Extensions (MSE), today that is Chrome and IE11 (other browsers have indicated their intent to support MSE).

Creating a browser-based streaming video player

In simple terms, the intention of the below example is to demonstrate how easy it can be to build an MPEG-DASH player into your website. If you have any problems applying this example to your own real world use case, pop over to the dash.js community mailing list, where we will be happy to help you out.

To create a simple web page that displays a video player with the expected controls such a play, pause, rewind etc., you will need to:

  • Create an HTML page
    • Add the video tag
  • Add the dash.js player
  • Initialize the player
  • Add some CSS style
  • View the results in a browser that implements MSE

The only part of this process that may be new to most of you is the "Initialize the player" step. This step can be completed in just a handful of lines of JavaScript code. Using dash.js, it really is that simple to embed MPEG-DASH video in your browser based application - including native applications that use HTML and JavaScript!

Creating the HTML page

The first step is to create a standard HTML page containing the <video> element, save this file as basicPlayer.html. You will tell the player to display its controls (by including the “control"), but won’t need to initialize any other aspects of the player in the HTML. This configuration could be managed completely in JavaScript, if desired.

Here is the HTML you should have in basicPlayer.html:

 <!DOCTYPE html>
<html>
  <head><title>Adaptive Streaming in HTML5</title></head>
  <body>
    <h1>Adaptive Streaming with HTML5</h1>
    <video id="videoplayer" controls></video>
  </body>
</html>

Since there is nothing unusual about this HTML. let’s move quickly on to the dash.js player code.

Adding the dash.js player

To add the dash.js reference implementation to the application, you’ll need to grab the dash.all.js file from the 1.0 release of dash.js project. This should be saved in the JavaScript folder of your application. This file is a convenience file that pulls together all the necessary dash.js code into a single file. If you have a look around the dash.js repository, you will find the individual files, test code and much more, but if all you want to do is use dash.js, then the dash.all.js file is what you need.

If you prefer you could use the code from the master branch. The master branch contains the latest fully tested version of the code. At the time of writing this tutorial will work with the mater branch, and this should always be the case. The adventurous might want to use the development branch, which contains all the latest changes that have been accepted by the project community. This is the code that will go into the next release of dash.js. While there has been some testing on this branch, it is development code to be used at your own risk.

Should you encounter any problems with any version of the code, please discuss them on the projects mailing list. If you uncover any bugs please report them via our issue tracker. In addition, as an open source project, we welcome appropriate code contributions, please fork the project on GitHub and issue a pull request.

Whichever version of dash.all.js you choose to use, you will need to be load it into your application, to do this add a script tag to the head section of basicPlayer.html:

<!-- DASH-AVC/265 reference implementation -->
<script src="js/dash.all.js"></script>

Next, create a function to initialize the player when the page loads. Add the following script after the line in which you load dash.all.js:

 <script>
 // setup the video element and attach it to the Dash player
function setupVideo() {
  var url = "http://wams.edgesuite.net/media/MPTExpressionData02/BigBuckBunny_1080p24_IYUV_2ch.ism/manifest(format=mpd-time-csf)";
   var context = new Dash.di.DashContext();
  var player = new MediaPlayer(context);
                  player.startup();
                  player.attachView(document.querySelector("#videoplayer"));
                  player.attachSource(url);
}
 </script>

This function first creates a DashContext. This is used to configure the application for a specific runtime environment. From a technical point of view, it defines the classes that the dependency injection framework should use when constructing the application. In most cases, you will use Dash.di.DashContext.

Next, instantiate the primary class of the dash.js framework MediaPlayer. This class contains the core methods needed such as play and pause, manages the relationship with the video element and also manages the interpretation of the Media Presentation Description (MPD) file which describes the video to be played. You will be working with this MediaPlayer from now on.

The startup() function of the MediaPlayer is called to ensure that the player is ready to play video. Amongst other things this function ensures that all the necessary classes (as defined by the context) have been loaded. Once the player is ready, you can attach the video element to it using the attachView() function. This enables the MediaPlayer to inject the video stream into the element and also control playback as necessary. Finally, pass the URL of the MPD file to the MediaPlayer so that it knows about the video it is expected to play.

The setupVideo() function just created will need to be executed once the page has fully loaded. Do this by using the onload event of the body element. Change your <body> element to:

 <body onload="setupVideo()">

Finally, set the size of the video element using CSS. In an adaptive streaming environment, this is especially important because the size of the video being played may change as playback adapts to changing network conditions. In this simple demo simply force the video element to be 80% of the available browser window by adding the following CSS to the head section of the page:

 <style>
video {
  width: 80%;
  height: 80%;
}
</style>

Playing video

That's it. You now have a fully functional JavaScript MPEG-DASH player that will work in any browser that supports MSE. Point your browser at your basicPlayback.html file, click play on the video controls and watch your video in all its adaptive streaming glory.

From here it is a relatively small step to create, for example, a Windows Store application using dash.js. Or you could create a module for Drupal, Joomla, WordPress or some other content management system.

Our goal with dash.js is to make it as reusable as possible. If you need any help getting it to work for you contact us through the project mailing list. We will be happy to help!