Flowplayer · DASH support

VOD

player engine:

video type:

video source:

Live DVR

DASH DVR 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(//flowplayer.com/media/img/drive/home/drive-shoot.jpg);
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
#dashvod {
background-image: url(//flowplayer.com/media/img/drive/home/drive-shoot@2x.jpg);
}
}

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.0.4/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,
 
// Safari issues with manual switching for this stream
// -> disable
dash: {
qualitiesForSafari: false
},
 
clip: {
sources: [
{ type: "application/dash+xml",
src: "//edge.flowplayer.org/drive.mpd" },
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/drive.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/drive.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("#dashdvr", {
errors: customErrors,
ratio: 9/16,
splash: true,
clip: {
dvr: true,
sources: [
{ type: "application/dash+xml",
src: "//24x7dash-i.akamaihd.net/dash/live/900080/dash-demo/dash.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>
 
<h2 id="dvr">Live DVR</h2>
 
<div id="dashdvr"></div>
 
<p class="info">DASH DVR live stream</p>

HTML