search

flowplayer / flowplayer-mpegdash

MIT License
8 stars 13 forks source link

readme

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

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:

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="https://github.com/flowplayer/flowplayer-mpegdash/raw/master//releases.flowplayer.org/7.1.0/flowplayer.min.js"></script>

<!-- load dash.js latest release -->
<!-- <script src="https://github.com/flowplayer/flowplayer-mpegdash/raw/master//cdn.dashjs.org/v2.6.0/dash.all.min.js"></script> -->

<!-- or load dash.js latest dev build -->
<script src="https://github.com/flowplayer/flowplayer-mpegdash/raw/master//cdn.dashjs.org/latest/dash.all.min.js"></script>

<!-- load latest plugin standalone -->
<script src="https://github.com/flowplayer/flowplayer-mpegdash/raw/master//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="https://github.com/flowplayer/flowplayer-mpegdash/raw/master//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