# MPEG-DASH plugin

The MPEG-DASH plugin consists of an MPEG-DASH loader plugin capable of playing media presentation description (MPD) source files. Loader plugins handle the `src` property of the player configuration, getting the video source into the player's HTML `<video>` element and assisting with playback. This plugin works by incorporating the dash.js library

## Before you start

Before you use this plugin with the standalone player, we recommend the following steps:

* Read about [embedding the core player](/docs/wowza-flowplayer/player/embed/embed-with-standalone/) in your site by adding the minimum CSS and JavaScript player components.
* Make sure you have a player token. For more, see [Token configuration](/docs/wowza-flowplayer/player/configure/#token-configuration). Tokens aren't needed for local development.
* The instructions on this page generally assume you're using the Wowza Flowplayer CDN to embed the player in your site. If you're using npm, see our [npm instructions](/docs/wowza-flowplayer/player/embed/embed-with-standalone/#use-npm) or our [TypeScript guide](/docs/wowza-flowplayer/guides/add-the-player-using-typescript/).


## Install the plugin

You can load the MPEG-DASH plugin next to the core player and any other plugins you would like to use:


```html
<!-- Load standard player skin -->
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<!-- Load player script -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>

<!-- Load plugin -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/dash.min.js"></script>
```


```js
// Import player library and basic CSS for player
import flowplayer from "@flowplayer/player";
import "@flowplayer/player/flowplayer.css";

// Import plugin
import Dash from "@flowplayer/player/plugins/dash";
```

## Add HTML elements

embed
## Configure the plugin

To utilize this plugin, initialize your player instance using a DASH stream and your player token. The MPEG-DASH plugin doesn't support any additional configurations to the player.


```js
const player = flowplayer("#player",
  {
    src: "//edge.flowplayer.org/bauhaus.mpd",
    token: "[your-player-token]"
  }
);
```

## Listen to plugin events

This section describes the events you can capture to control and manage your DASH player instance.

The usage of `player.dash` is deprecated with version 3.12.1 of the player. We recommend that you access your Dash.js player instance via the `ATTACHED` event listener and `event.detail.dash`. This means `event.detail.dash` gives you direct access to Dash.js API methods and properties. To understand event handling differences between CDN or npm implementations, see [Plugin events](/docs/wowza-flowplayer/plugins/about-plugins/#plugin-events).

| CDN event | npm event | Description |
|  --- | --- | --- |
| `flowplayer.dash.events.ATTACHED` | `Dash.events.ATTACHED` | Fires when the dash.js library attaches to the `<video>` element, allowing it to handle DASH playback. |


#### Example

The following example sets up an event listener to capture when the dash.js instance is attached to the media element and the player is ready to handle the stream.


```js
const player = flowplayer("#player", {
  src: "//edge.flowplayer.org/bauhaus.mpd"
});

player.on(flowplayer.dash.events.ATTACHED, (event) => {
  // Access Dash.js instance and Dash.js engine
  const dashPlayer = event.detail.dash;
  // Set playback speed to 1.5x https://cdn.dashjs.org/latest/jsdoc/module-MediaPlayer.html#setPlaybackRate
  dashPlayer.setPlaybackRate(1.5);
});
```


```js
const player = flowplayer("#player", {
  src: "//edge.flowplayer.org/bauhaus.mpd"
});

player.on(Dash.events.ATTACHED, (event) => {
  // Access Dash.js instance and Dash.js engine
  const dashPlayer = event.detail.dash;
  // Set playback speed to 1.5x https://cdn.dashjs.org/latest/jsdoc/module-MediaPlayer.html#setPlaybackRate
  dashPlayer.setPlaybackRate(1.5);
});
```