Flowplayer · dashjs plugin

VOD

player engine:

video type:

video source:

Video courtesy of Figs In Wigs

Live

DASH live stream

DASH is a technique for adaptive bitrate streaming (ABR) similar to HLS.

Browser implementations of DASH rely on the MediaSource-feature of browsers, and the MediaSource implementation must support video and audio codecs at the profile and level the DASH streams are encoded; additionally dash.js (see below) must be able to handle the stream in the browser. Your browser: .

In this demo we show MPEG-DASH streams because browser support is wider than for WEBM-DASH and the client dash.js library's implementation is still brittle.

To use DASH with Flowplayer you need to use the dashjs plugin which is packed with a compatibility tested version of dash.js from the Dash Industry Forum.

Compare with the hlsjs plugin.

Source picking order

  1. MPEG-DASH (dynamic resolution switching): Chrome 34+, Firefox 42+, Internet Explorer 11+, Mac OS Safari 8+, Opera 30+, Chrome 34+ for Android
  2. HLS (dynamic resolution switching): most mobile devices, desktop browsers with Flash enabled
  3. WEBM (fallback)
  4. MP4 (fallback)

<head/>

<style>

.flowplayer,
.flowplayer .fp-message {
background-color: #00abcd;
}
#dashvod {
background-image: url(http://demos.flowplayer.org/media/img/figsinwigs.jpg);
background-color: #f60;
}

CSS

<script>

To be able to play DASH streams, simply load the dashjs plugin after the flowplayer script:

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.2.1/flowplayer.min.js"></script>
 
<!-- Flowplayer dash engine -->
<script src="//releases.flowplayer.org/dashjs/flowplayer.dashjs.min.js"></script>

HTML

Then the player can be installed as usual, with an additional DASH source:

window.onload = function () {
 
flowplayer("#dashvod", {
splash: true,
ratio: 9/16,
share: false,
 
clip: {
sources: [
{ type: "application/dash+xml",
src: "//edge.flowplayer.org/cilla_black_bean_sauce.mpd" },
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/cilla_black_bean_sauce.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/cilla_black_bean_sauce.mp4" }
]
}
 
}).on("ready", function (e, api, video) {
// info for demo purposes
document.getElementById("engine").innerHTML = api.engine.engineName;
document.getElementById("vtype").innerHTML = video.type;
document.getElementById("src").innerHTML = video.src;
 
});
 

// live stream only avaible as DASH
// customize error message where DASH is not supported
var customErrors = flowplayer.defaults.errors.slice(0),
customError = "Test stream only available as MPEG-DASH<br>" +
"Please try in a different browser";
 
customErrors[5] = customError;
customErrors[10] = customError;
 
flowplayer("#dashlive", {
errors: customErrors,
ratio: 9/16,
splash: true,
clip: {
live: true,
sources: [
{ type: "application/dash+xml",
src: "//irtdashreference-i.akamaihd.net/dash/live/901161/bfs/manifestARD.mpd" }
]
}
});
 
};

JavaScript

<body/>

<h2 id="vod">VOD</h2>
 
<div id="dashvod" class="is-closeable"></div>
 
<div class="info">
<p>player engine: <span id="engine"></span></p>
 
<p>video type: <span id="vtype"></span></p>
 
<p>video source: <span id="src"></span></p>
</div>
 
<p class="info">Video courtesy of <a href="https://www.figsinwigs.com/">Figs In Wigs</a></p>
 
<h2 id="live">Live</h2>
 
<div id="dashlive" class="no-toggle"></div>
 
<p class="info">DASH live stream</p>

HTML