Flowplayer · DASH support

VOD

player engine:

video type:

video source:

Live DVR

DASH DVR live stream simulation

DASH DRM

Encrypted DASH 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.org/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.org/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;
 
});
 

var dvrcontainer = document.getElementById("dashdvr");
flowplayer(dvrcontainer, {
ratio: 9/16,
splash: true,
clip: {
dvr: true,
sources: [
{ type: "application/dash+xml",
src: "http://vm2.dashif.org/livesim/testpic_6s/Manifest.mpd" }
]
}
 
}).on("error", function (e, api, err) {
if (err.code == 5 || err.code === 10) {
// customize error as this is not a production scenario
dvrcontainer.querySelector(".fp-message").innerHTML =
"<p>Test stream only available as MPEG-DASH</p>" +
"<p>Please try in a different browser</p>";
}
 
});
 
var drmcontainer = document.getElementById("dashdrm");
flowplayer(drmcontainer, {
ratio: 9/16,
splash: true,
clip: {
dash: {
// protection data for this clip
protection: {
"com.widevine.alpha": {
"serverURL": "https://drm-widevine-licensing.axtest.net/AcquireLicense",
"httpRequestHeaders": {
"X-AxDRM-Message": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiMTUzMGQzYTAtNjkwNC00NDZhLTkxYTEtMzNhMTE1YWE4YzQxIn0seyJpZCI6ImM4M2ViNjM5LWU2NjQtNDNmOC1hZTk4LTQwMzliMGMxM2IyZCJ9LHsiaWQiOiIzZDhjYzc2Mi0yN2FjLTQwMGYtOTg5Zi04YWI1ZGM3ZDc3NzUifSx7ImlkIjoiYmQ4ZGFkNTgtMDMyZC00YzI1LTg5ZmEtYzdiNzEwZTgyYWMyIn1dfX0.9t18lFmZFVHMzpoZxYDyqOS0Bk_evGhTBw_F2JnAK2k"
}
},
"com.microsoft.playready": {
"serverURL": "https://drm-playready-licensing.axtest.net/AcquireLicense",
"httpRequestHeaders": {
"X-AxDRM-Message": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiMTUzMGQzYTAtNjkwNC00NDZhLTkxYTEtMzNhMTE1YWE4YzQxIn0seyJpZCI6ImM4M2ViNjM5LWU2NjQtNDNmOC1hZTk4LTQwMzliMGMxM2IyZCJ9LHsiaWQiOiIzZDhjYzc2Mi0yN2FjLTQwMGYtOTg5Zi04YWI1ZGM3ZDc3NzUifSx7ImlkIjoiYmQ4ZGFkNTgtMDMyZC00YzI1LTg5ZmEtYzdiNzEwZTgyYWMyIn1dfX0.9t18lFmZFVHMzpoZxYDyqOS0Bk_evGhTBw_F2JnAK2k"
}
}
}
},
sources: [
{ type: "application/dash+xml",
src: "https://media.axprod.net/TestVectors/v6.1-MultiDRM-MultiKey/Manifest_1080p.mpd" }
]
}
 
}).on("error", function (e, api, err) {
if (err.code == 5 || err.code === 10) {
// customize error as this is not a production scenario
drmcontainer.querySelector(".fp-message").innerHTML =
"<p>Test stream only available as MPEG-DASH</p>" +
"<p>Please try in a different browser</p>";
}
});
 
};

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 simulation</p>
 
<h2 id="drm">DASH DRM</h2>
 
<div id="dashdrm"></div>
 
<p class="info">Encrypted DASH stream</p>

HTML