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 in your site by adding the minimum CSS and JavaScript player components.
• Make sure you have a player token. For more, see 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 or our TypeScript guide .

Install the plugin

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

<!-- 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>

// 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

Add the HTML components to render the player elements on your page:

<div id="player"></div>

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.

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.

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.

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);
});

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);
});