Installation

There are multiple ways to obtain the dist files of dash.js to be included in your application

CDN hosted files

The latest minified files have been hosted on a global CDN and are free to use in production:

In addition, all the releases are available under the following urls. Replace "vx.x.x" with the release version, for instance "v3.1.0".

An overview of the dash.js releases can be found on Github.

Build dist files yourself

To build the dist files of the latest stable release yourself run the following steps:

  1. Install Core Dependencies
  2. Checkout project repository (default branch: development)
    • git clone https://github.com/Dash-Industry-Forum/dash.js.git
  3. Change branch to master
    • git checkout -b master origin/master
  4. Install dependencies
    • npm install
  5. Build the dist files.
    • npm run build

NPM package

We publish dash.js to npm. Examples of how to use dash.js in different module bundlers can be found in the samples/modules directory.

Setup

The standard setup method uses JavaScript to initialize and provide video details to dash.js.

Examples

Multiple examples showcasing the different ways to initialize the player are available in the sample section.

Standard Setup

Create a video element somewhere in your html. For our purposes, make sure the controls attribute is present.

<video id="videoPlayer" controls></video>

Add dash.all.min.js to the end of the body.

<body>
...
<script src="yourPathToDash/dash.all.min.js"></script>
</body>

Now comes the good stuff. We need to create a MediaPlayer and initialize it.

var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), url, true);

When it is all done, it should look similar to this:

<!doctype html>
<html>
<head>
    <title>Dash.js Rocks</title>
    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>
</head>
<body>
<div>
    <video id="videoPlayer" controls></video>
</div>
<script src="yourPathToDash/dash.all.min.js"></script>
<script>
    (function () {
        var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
        var player = dashjs.MediaPlayer().create();
        player.initialize(document.querySelector("#videoPlayer"), url, true);
    })();
</script>
</body>
</html>

Alternative Setup

An alternative way to build a Dash.js player in your web page is to use the MediaPlayerFactory. The MediaPlayerFactory will automatically instantiate and initialize the MediaPlayer module on appropriately tagged video elements.

Create a video element somewhere in your html and provide the path to your mpd file as src. Also ensure that your video element has the data-dashjs-player attribute on it.

<video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls>
</video>

Add dash.all.min.js to the end of the body.

<body>
...
<script src="yourPathToDash/dash.all.min.js"></script>
</body>

When it is all done, it should look similar to this:

<!doctype html>
<html>
<head>
    <title>Dash.js Rocks</title>
    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>
</head>
<body>
<div>
    <video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls>
    </video>
</div>
<script src="yourPathToDash/dash.all.min.js"></script>
</body>
</html>