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
codecsoption - 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 defaultinbandvalue.
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
makeKnown issues
- Android: Until
this bug fix
has propagated onto devices, streams with High profile AAC audio (
mp4a.40.5) may not play. MediaSourcevideo type and codecs feature detection via JavaScript is broken in many clients in a similar fashion as for SOURCE/VIDEO tag type attributes.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent