Skip to content
This repository has been archived by the owner on Sep 30, 2021. It is now read-only.

flowplayer/flowplayer-mpegdash

Repository files navigation

Flowplayer dashjs plugin

This plugin provides the dash engine for playback of DASH streams.

The plugin relies on the dash.js client, courtesy of the DASH Industry Forum.

Usage

See: https://flowplayer.org/docs/plugins.html#dashjs

CommonJS

The plugin can be used in a browserify and/or webpack environment with a commonjs loader:

var flowplayer = require('flowplayer');
var engine = require('flowplayer-dashjs');
engine(flowplayer-dashjs); // plugin injects itself into flowplayer

flowplayer('#container', {
  clip: {
    sources: [{
      type: 'application/dash+xml',
      src: '//stream.flowplayer.org/bauhaus.mpd'
    }]
  }
});

Demo

A fully documented demo can be found here.

Features

  • packs a compatibility tested version - current: v2.6.0 - of dash.js by the Dash Industry Forum
  • engine is only loaded if the client supports DASH in a MediaSource element, see also the codecs option
  • also available for Flowplayer version 5.x (demo) - not developed anymore, uses v1.6.0 of dash.js

Stream compatibility

DASH is not a fixed standard yet, but a moving target. As the plugin is based on dash.js stream compatibility can be cross-checked in the latest dash.js sample player.

Caveat: WebM-DASH streams are extremely unlikely to work correctly with dash.js - or any other available client library we know about. - Hence historically the name of the plugin Git repository.

Also test streams for conformance in DASH validator.

GPAC

If MP4Box by GPAC is used to create the MPEG-DASH streams our current recommendation is:

  • -bs-switching 'merge' or -bs-switching 'no' should be used to make the streams work in Mac OS Safari and Windows Internet Explorer. These clients do not support the avc3 codec version resulting from the default inband value.

Disclaimer: The above recommendation is based on MP4Box - GPAC version 0.6.2-DEV-rev261-gb07662c-master. Other versions may yield different results with different consequences. They might also be affected by other members of a transcoding toolchain.

Debugging

A quick way to find out whether the currently packed version of dash.js is causing a problem is to load the components separately using the latest development build or release from the dash.js CDN:

<script src="//releases.flowplayer.org/7.1.0/flowplayer.min.js"></script>

<!-- load dash.js latest release -->
<!-- <script src="//cdn.dashjs.org/v2.6.0/dash.all.min.js"></script> -->

<!-- or load dash.js latest dev build -->
<script src="//cdn.dashjs.org/latest/dash.all.min.js"></script>

<!-- load latest plugin standalone -->
<script src="//releases.flowplayer.org/dashjs/flowplayer.dashjs.js"></script>

<script>
// turn on dashjs debugging
flowplayer.conf.dash = {
  debug: true
};
</script>

Conversely, to find out whether there's a problem with the actual plugin component can be tested by exclusion with a simple page using bare dash.js, like:

<!DOCTYPE html>
<html>
<head>

<script src="//cdn.dashjs.org/v2.6.0/dash.all.min.js"></script>

<script>
window.onload = function () {
  var videoTag = document.querySelector("video"),
      mediaPlayer = dashjs.MediaPlayer().create();

  mediaPlayer.initialize(videoTag, "//example.com/testvideo.mpd");
};
</script>

</head>
<body>

<video controls></video>

</body>
</html>

Building the plugin

Build requirement:

cd flowplayer-mpegdash
make deps
make

Known issues

  • Android: Until this bug fix has propagated onto devices, streams with High profile AAC audio (mp4a.40.5) may not play.
  • MediaSource video type and codecs feature detection via JavaScript is broken in many clients in a similar fashion as for SOURCE/VIDEO tag type attributes.